Chrome浏览器返回上一页填充文本框Bug

最新推荐文章于 2023-12-29 14:30:40 发布

原创最新推荐文章于 2023-12-29 14:30:40 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Chrome #返回上一页 #Bug

Bug收集专栏收录该内容

1 篇文章

订阅专栏

本文探讨了一个Chrome浏览器的特定问题：当动态添加的文本框中输入内容后，点击返回上一页再前进，内容会错误地填充到后续文本框。分析认为，可能是浏览器的恢复数据操作与页面动态加载的时机冲突所致。

先附上代码

<html>
<body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script >
	$(function () {
    	$("#test2").before('<input type="text" id="test1" value=""><br>');
	});
	</script>
	<input type="text" id="test2" value=""><br>
	<input type="text" id="test3" value=""><br>
	</body>
</html>

加载的页面效果如下:
然后在第一个文本框中输入任意值
点击浏览器的<-按钮后再点击->按钮
之前输入的任意值就跳到第二个文本框里面了

-再点击浏览器的<-按钮后再点击->按钮
之前输入的任意值就跳到第三个文本框里面了

这个问题我在Safari浏览器中操作时,点击浏览器的<-按钮后再点击->按钮后输入的任意值仍在第一个文本框中
Safari没问题
这应该是chrome浏览器Bug,
推测原因是由于第一个文本框是通过js动态添加的,而恢复数据的操作先于js执行,导致本该填充在第一个文本框的数据填充在了第二个文本框中