如何禁止浏览器自动填充表单

在使用浏览器访问网页时，浏览器会自动填充表单，提高用户体验，但有时候我们需要禁止浏览器自动填充表单，以防止浏览器自动填充错误的信息。

使用HTML标签禁止浏览器自动填充表单

使用HTML标签可以非常简单的禁止浏览器自动填充表单，只需要在表单元素的标签中添加autocomplete属性，并设置为off即可。例如：

这样就可以禁止浏览器自动填充表单，但是这种方法只适用于单个表单元素，如果要禁止多个表单元素，就需要重复添加autocomplete属性，这样会显得很繁琐，也不利于页面维护，所以不推荐使用这种方法。

使用JavaScript禁止浏览器自动填充表单

使用JavaScript可以简单的禁止浏览器自动填充表单，只需要在页面加载完成后，获取需要禁止自动填充的表单元素，设置其autocomplete属性为off即可。例如：

window.onload = function() {
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].setAttribute('autocomplete', 'off');
    }
}

这样就可以禁止所有表单元素的自动填充，但是这种方法有一个缺点，就是如果页面加载时间过长，用户可能会看到浏览器自动填充表单的效果，所以不推荐使用这种方法。

使用CSS禁止浏览器自动填充表单

使用CSS也可以禁止浏览器自动填充表单，只需要在CSS中添加如下代码：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

这样就可以禁止所有表单元素的自动填充，而且不会影响页面加载时间，所以推荐使用这种方法。