我正在使用下面的脚本根据需要生成输入字段。但是,刷新或单击返回提交错误页面时,输入的字段和信息会消失。有什么办法可以在点击返回或刷新页面后保留字段吗?
$(document).ready(function() {
var MaxInputs = 67;
var InputsWrapper = $("#InputsWrapper");
var AddButton = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount=8;
$(AddButton).click(function (event)
{
if(x <= MaxInputs)
{
FieldCount++;
$(InputsWrapper).append('<div><input type="text" class="input" size="22"
maxlength="80" name="hostname'+ FieldCount +'" id="field_'+ FieldCount +'"/>
<input class="left-margin" type="text" SIZE="15" MAXLENGTH="15" name="ipaddr'+
FieldCount +'" id="field_'+ FieldCount +'"/><input class="left-margin"
type="text" SIZE="15" MAXLENGTH="15" name="app'+ FieldCount +'" id="field_'+
FieldCount +'"/> <button type="button"class="removeclass">Remove</button>
</div>');
x++;
}
return false;
});
$("body").on("click",".removeclass", function(event){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
})
});
如果您可以使用 HTML5 功能,一种方法是使用本地存储。创建输入字段时,您可以将所做的操作保存在本地存储中。
这样,当页面加载时,您可以检查本地存储中的内容,检测页面之前是否加载过,并重建之前动态添加的字段。
像这样的东西:
$(document).ready(function(){
$("#myButton").click(function(){
var htmlAppend = '<input type="text" name="theName" />';
$("#content").append(htmlAppend);
//After appropriate checks that local storage is supported...
localStorage.setItem("htmlAppend", htmlAppend);
});
var htmlAppend = localStorage.getItem("htmlAppend");
if (htmlAppend) {
$("#content").append(htmlAppend);
}
});
当然这只是一个例子,以提供一个方向。
您可能需要注意的其他事项:
- 如果可以通过多个事件添加其他几个 HTML 片段,则必须update本地存储而不仅仅是设置它。即:检查已存储的内容,如果有则将新内容追加到其中。
- 这不会保存您可能附加到动态 HTML 的事件处理程序。如果您想实现这一目标,则必须以某种方式在存储值中对其进行编码。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)