[英]Loading Placeholder tag in FORM when variables are set
我有一个用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翻转转换。
在此先感谢您的协助。
好的,我可以通过一些自定义功能解决该问题。 我必须失去翻转效果,然后转到简单的淡入淡出,但最终还是使用了
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>
因此,现在我可以正确加载所有动态内容的页面,并具有一致的褪色效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.