时间戳

首页 > 解决方案 > 防止 chrome 向后/向前填充历史上的选择字段

javascript - 防止 chrome 向后/向前填充历史上的选择字段

问题描述

我有一个带有自定义onsubmit处理程序的表单，它读取<select>输入中选择的值。

<form onsubmit="handleSubmit()">
  <select id="selector" name="selector">
    <option selected hidden disabled value>Select an option</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</form>

当我在 Chrome 中打开此页面时，从下拉列表中选择一个值并在我的历史记录中返回一页，然后向前一页以再次登陆带有表单的页面，在通过带有$('#selector').val()返回的 JS 访问该字段时已经选择了该选项我是一个空值。

我已经尝试autocomplete="off"在<select>标签上指定但没有成功。禁用该页面的缓存也无济于事。

关于如何解决这个问题的任何建议？

标签： javascripthtmlgoogle-chromeautocomplete

解决方案

这是由于强大的 chrome 的历史形式缓存。

我也没有为此找到 CSS 或 HTML 解决方案。所以我用JS做到了。每次显示页面时——无论页面是从历史缓存中加载还是刚刚重新加载——浏览器都会触发“pageshow”事件。

使用 jQuery：

$(window).bind("pageshow", function() {
    $('#your_form_id')[0].reset();
});

使用普通的 JS：

var oForm2Reset = document.getElementById('your_form_id');
if( oForm2Reset ) {
    window.onpageshow = function() {
        oForm2Reset.reset();
    };
}

推荐阅读