設置變量后在FORM中加載占位符標簽

Question

我有一個用HTML5編寫的簡單用戶設置表單，該表單將用戶定義的設置提交到本地存儲。

我想要這樣，以便如果有人再次訪問設置頁面，並且定義了用戶設置，則占位符和/或值將使用這些設置預填充表單。

我嘗試在開始和結尾處使用window.load，document.ready，但是如果單擊“重新加載”，我只能獲得加載該值的表單。 如果訪問了頁面，我需要這些值進行預過濾。

這是我的表單版本，如果您重新加載頁面，它將加載值

腳本優先

function loadUserSettings() {
    $("#full_name").attr("placeholder", db_user.full_name);
    $("#mobile_number").attr("placeholder", db_user.mobile_number);
    $("#email_address").attr("placeholder", db_user.email_address);

    $("#full_name").attr("value", db_user.full_name);
    $("#mobile_number").attr("value", db_user.mobile_number);
    $("#email_address").attr("value", db_user.email_address);
}

現在是表格

<body>

  <div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
      <div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
          <a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
              Back
          </a>
          <a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
              Help
          </a>
          <h3 class="global_header">
              Settings
          </h3>
      </div>
      <div data-role="content" style="padding: 1%">
          <form id="postSettings" action="" class="global_form">
              <div data-role="fieldcontain" data-controltype="textinput" class="full_name">
                  <label for="full_name">
                      Name
                  </label>
                  <input name="full_name" id="full_name" type="text" data-mini="true"/>
              </div>
              <div data-role="fieldcontain" data-controltype="textinput" class="email_address">
                  <label for="email_address">
                      Email Address
                  </label>
                  <input name="email_address" id="email_address" type="email" data-mini="true"/>
              </div>
              <div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
                  <label for="mobile_number">
                      Mobile Number
                  </label>
                  <input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
              </div>
              <input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
          </form>
      </div>
  </div>
</body>

<script language="JavaScript">
    document.ready = loadUserSettings();
</script>

我使用附加到設置按鈕上的功能來管理變通方法，基本上

function loadSettingsPage() {
    window.location.href = "settings.html";
}

每次預填充占位符/值都沒問題，但是我使用的是“ FLIP”的數據轉換鏈接，而使用上述函數會丟失該鏈接。

因此，理想情況下，我想在單擊正常鏈接時修復占位符的注入（我懷疑這只是一個不會循環的頁面刷新類型選項），或者使我的loadSettingsPage使用JQuery翻轉轉換。

在此先感謝您的協助。

Answer 1

好的，我可以通過一些自定義功能解決該問題。 我必須失去翻轉效果，然后轉到簡單的淡入淡出，但最終還是使用了

function fadeIn() {
    $("body").hide();
    $("body").fadeIn(500);
}

function loadPageSettings(urlvar) {
    $("body").fadeOut(500, function(){ window.location.href = urlvar; });
}

用於自定義功能

所有超鏈接都使用了這樣的內容

<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>

在每頁的頁腳處

<script language="javascript">
    window.onload = fadeIn();
</script>

因此，現在我可以正確加載所有動態內容的頁面，並具有一致的褪色效果。

設置變量后在FORM中加載占位符標簽

問題描述

1 個解決方案

解決方案1
0 2014-07-28 12:14:33

設置變量后在FORM中加載占位符標簽

問題描述

1 個解決方案

解決方案1 0 2014-07-28 12:14:33

解決方案1
0 2014-07-28 12:14:33