谷歌浏览器后退按钮input内值丢失的问题

Posted 2020-06-30 蔷薇骑士

问题描述:

商品页面，有四个input框，

 

输入数字后，点击按钮跳转到其他页面，然后点浏览器的返回按钮，这里记录的数字会出现错误（丢失了一个数字）。只有谷歌浏览器出现这个问题，其他浏览器没发现。

 

经过排查，发现是有一句JS引起的:

 

$(‘#searchkey‘).attr(‘autocomplete‘,‘off’)

 

上面的搜索框关掉自动完成属性这句JS引起的。删除后，问题解决。

 

 

可能原因：

 

谷歌浏览器在加载的时候，判定了input的个数，放入缓存，浏览器回退按钮点击后，取对应的数据放到对应的input中。

而JS动态的autocomplete=off，浏览器并没有记录，使得浏览器在取缓存数据的时候，也会将一份数据放到这个input中。

又由于这个input被JS设置为autocomplete=off，使得他被分配的值没有展示。最后看起来，就像是下方的input的值丢失一样。

 

 

解决方案：

 

1.autocomplete=off写到input的属性里面，不要用JS

2.或者这段JS就删掉就好咯~