IE 11（Edge）中输入（文本/隐藏）的值第二次为空，“返回”或history.back（）
Posted
技术标签:
【中文标题】IE 11（Edge）中输入（文本/隐藏）的值第二次为空，“返回”或history.back（）【英文标题】：The value of input (text / hidden) empty in IE 11 (Edge), "back" or history.back () for second time 【发布时间】：2016-11-08 08:11:51 【问题描述】：Windows 7 的 IE 11 (Edge) 上的Forward 或 back 导航按钮
或者可以使用history.forward ()、history.back () 移动历史记录
在第一次历史显示中，输入的值被恢复，
在第二个历史显示中，输入的值变为空。
这是 IE 11 (Edge) 的问题吗？
Windows 10 (Edge) 浏览器也会这样做。 兼容模式下 IE 8 之前的值不为空，但 IE 9 之后的值为空。 在 FireFox、Chrome、Safari、Opera 中，该值不为空。示例操作。
输入表格A。
(1) 在<input type = "text" name = "a1" value = ""> 文本框中输入一个值。
(2) 按<input type = "submit" name = "send" value = "send">发送，转换到输入表单B。
输入表格 B。
(1) 在<input type = "text" name = "a1" value = ""> 文本框中输入一个值。
(2) 按<input type = "submit" name = "send" value = "send">发送，转换为输入表格C。
输入表格C。
(1) 在<input type = "text" name = "a1" value = ""> 文本框中输入一个值。
(2) 按<input type = "submit" name = "send" value = "send">发送，转换为输入表单A。
输入表格A。
(1) 按back 键回输入表格C。
输入表格C...显示第一个历史显示值。
(1) 按back按钮返回输入表格B。
输入表格B...显示第一个历史显示值。
(1)按back键输入A表回。
输入A表...显示第一个历史显示值。
(1)按forward按钮进入输入表单B。
输入Form B ...第二次历史显示，值为空。
(1)按forward按钮转发到输入表格C。
输入表格C...第二次历史显示，值为空。
示例代码（使用 JSP 创建）。
（但是，描述代码中没有使用JSP语句。）
[history_back_test1.jsp]
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
Input form A
<form action="history_back_test2.jsp" method="post">
<input type="text" id="idval1" name="a1" value="">
<br>
<input type="submit" value="next page">
</form>
</body>
</html>
[history_back_test2.jsp]
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
Input form B
<form action="history_back_test3.jsp" method="post">
<input type="text" id="idval1" name="a1" value="">
<br>
<input type="submit" value="next page">
</form>
</body>
</html>
[history_back_test3.jsp]
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
Input form C
<form action="history_back_test1.jsp" method="post">
<input type="text" id="idval1" name="a1" value="">
<br>
<input type="submit" value="next page">
</form>
</body>
</html>页面显示时的响应头
Key Value
State HTTP/1.1 200 OK
Server Apache-Coyote/1.1
Content-Type text/html;charset=Cp943C
Content-Length 385
Date Fri, 28 Oct 2016 08:12:54 GMT
删除input / type = "text"的value属性不会清空该值。
也许，
"浏览器持有该值。 某些标志在第一个显示中打开。 在第二个和随后的显示中，值 未恢复，因为标志已打开。”
看起来是这样的。
如果你能亲自回答，我会很高兴。
谢谢。
【问题讨论】：
【参考方案1】：您可以使用此代码：
$(document).ready(function ()
$("input[type=text]").each(function ()
$(this).val($(this).val());
);
);
【讨论】：
【参考方案2】：另一种方法是保持值不在元素中。
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
var dvs = new DelayInitValueSetter();
function DelayInitValueSetter()
var delayValues = [];
var thisRef = this;
var p = DelayInitValueSetter.prototype;
p.add = function(id, value)
var info = new Object();
info.id = id;
info.value = value;
delayValues[delayValues.length] = info;
;
p.reset = function()
window.setTimeout(function() dvs.exec(""); , 0);
p.exec = function(dvsFlag)
if (dvsFlag !== "" || delayValues.length === 0)
return;
for (var i = 0; i < delayValues.length; i++)
var elm = document.getElementById(delayValues[i].id).previousElementSibling;
elm.value = delayValues[i].value;
thisRef.completeDvsFlag();
;
p.getDvsFlag = function()
var dvsFlagElm = document.getElementsByName("dvsFlag");
if (dvsFlagElm === void(0) || dvsFlagElm === null || dvsFlagElm.length === 0)
return "";
return dvsFlagElm[0].value;
;
p.completeDvsFlag = function()
var dvsFlagElm = document.getElementsByName("dvsFlag");
if (dvsFlagElm === void(0) || dvsFlagElm === null || dvsFlagElm.length === 0)
return;
for (var i = 0; i < dvsFlagElm.length; i++)
dvsFlagElm[i].value = "completed";
;
window.addEventListener('load', function() dvs.exec(dvs.getDvsFlag());, false);
-->
</script>
</head>
<body>
Input form A
<form action="history_back_test2.jsp" method="post">
<input type="text" id="idval1" name="a1"><script id="dvs1">dvs.add("dvs1","");</script>
<input type="text" id="idval2" name="a2"><script id="dvs2">dvs.add("dvs2","123");</script>
<input type="text" id="idval3" name="a3"><script id="dvs3">dvs.add("dvs3","ABC");</script>
...
<br>
<input type="submit" value="next page">
<input type="hidden" name="dvsFlag" disabled="disabled">
</form>
</body>
</html>
谢谢。
【讨论】：
【参考方案3】：由于没有使用jQuery，所以我用纯JavaScript确认了效果：
window.addEventListener("load", function()
var elms = document.getElementsByTagName("input");
for (var i = 0; i < elms.length; i++)
var elm = elms[i];
var elmType = elm.type.toLowerCase();
if (elmType === "text" || elmType === "hidden")
elm.value = elm.value;
, false);
IE 11（Edge）、IE 10（IE 11 兼容模式）、IE 9（IE 11 兼容模式）OK。
即使在FireFox、Chrome、Safari、Opera上运行也没有问题。
【讨论】：
以上是关于IE 11（Edge）中输入（文本/隐藏）的值第二次为空，“返回”或history.back（）的主要内容，如果未能解决你的问题，请参考以下文章
在 Edge 浏览器上，如何使用 CSS 更改输入占位符文本颜色？
IE 10, 11. 如何防止使用占位符的文本输入触发焦点输入事件？