有关表单autocomplete = "off" 失效问题解决方案

一、autocomplete介绍

autocomplete是Html5中的新属性。
该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入的时候,浏览器基于之前输入过的值,应该显示出在字段中填写的选项。
该属性适用于<form>,以及下面的<input>类型。text,search,telephone,email,password,datepickers,range以及color.
该属性有两个值,on和off。
on是默认的,规定启用自动完成功能。
off是规定禁用自动完成功能。

二、有关autocomplete = "off"失效

做项目的时候,有这个固然方便。但是当我们做用户的找回密码这样的时候,或者重置密码的时候,有这个就显得不是那么好了。
当input的type为text的时候,autocomplete是乖乖的听话的。但是当是paddword的时候,发现并没有起作用。还是会提示密码。这时候上网查了查方法,自己也试了。接下来总结一下。

1.先设置属性readonly,然后在点击那个元素的时候,再把readonly设置为false。我使用的是这种方法解决的。

html代码

<input type="password" readonly="true" class="pwd" autocomplete="off">

js代码(假设引入了jquery)

$(".pwd").on("click", function () {
    $(this).attr("readonly", false)
})

2.先设置其type为text,单点击的时候,再把其type改为password

html代码

<input type="text" readonly="true" class="pwd" autocomplete="off">

js代码(假设引入了jquery)

$(".pwd").on("click", function () {
    $(this).attr("type", "text")
})

3.可以先写好一个type为text的input框,写一个type为password的input框。但是这个时候这个密码框是隐藏的。当点击文本框的时候。让文本框消失,密码框显示。其实思路和上面是一样的。

4.看网上还有一种说法,是把autocomplete的值写为'new-complete'。网易登陆邮箱就是这样写的。但是这个方式我实验了以后,是不可以的。你们可以试试哦~

原文地址:https://www.cnblogs.com/10manongit/p/12775190.html