当变量设置时，在FORM中加载占位符标记

Loading Placeholder tag in FORM when variables are set

本文关键字：加载 占位符 FORM 变量 设置      更新时间：2023-09-26

我有一个用HTML5编写的简单用户设置表单，它将用户定义的设置提交到本地存储。

我希望如果有人再次访问设置页面，并且定义了用户设置，那么占位符和/或值将用这些设置预先填充表单。

我试过使用窗口。加载文档。在结尾和开头都准备好了，但是如果我单击reload，我只能让表单加载三个值。如果页面被访问，我需要这些值来预置。

这是我的版本的表单加载值，如果你重新加载页面

第一个

脚本

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翻转过渡。

事先感谢您的帮助。

好的，我可以用一些自定义函数来解决这个问题。我不得不放弃翻转效果，转而使用简单的渐变，但我最终使用了

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>

所以现在我的页面加载正常，所有的动态内容和一致的淡出效果。

相关文章：