js 开发之autocomplete=”off”在chrom中失效的解决办法

js 开发之autocomplete=”off”在chrom中失效的解决办法 问题：在表单的输入框中，有时候我们并不希望点击输入框时，会出现提示信息。这时，在输入框中添加属性:autocomplete=”off”，一般能达到目的。而在chrom里面就失效。 失效的原因是：浏览器会根据输入框的input的type属性为password的时候，自动将用户名和密码框填充。 解决方法：因为浏览器是否自动填充内容，根据type=password来判断的。此时先将作为密码的输入框的type设成text,当点击密码输入框的时候，将其type属性设为password,这样问题就解决了。 HTML页面代码如 在JavaScript（JS）开发中，有时我们需要控制网页表单中的输入框不显示浏览器自动生成的自动补全（autocomplete）建议。通常，通过设置`autocomplete="off"`可以达到这个效果，但在Chrome浏览器中，这一方法可能不起作用，尤其是在涉及到`type="password"`的输入框时。这是因为浏览器出于用户便利性考虑，会记住并自动填充用户名和密码信息。 当遇到`autocomplete="off"`在Chrome中失效的问题时，我们可以采取以下策略来解决这个问题： 1. **改变初始类型**： 将用于输入密码的`<input>`元素的`type`属性设置为`text`而不是`password`。这将阻止浏览器将该输入框识别为密码输入框，从而避免自动填充功能的触发。 2. **事件监听**： 使用JavaScript监听密码输入框的`click`事件。当用户点击输入框时，通过JavaScript动态地将`type`属性更改为`password`。这样，用户开始输入时，输入框将变为密码输入模式，同时避免了浏览器的自动填充。 以下是结合上述策略的HTML和JavaScript代码示例： ```html <!-- HTML 部分 --> <input class="input1" id="userpassword" type="text" placeholder="新密码" autocomplete="off"/> ``` ```javascript // JavaScript 部分 $(document).ready(function() { $("#userpassword").click(function(){ $(this).attr("type","password"); }); }); ``` 在这个例子中，我们使用了jQuery库来简化DOM操作。`$(document).ready()`确保在页面加载完成后执行JavaScript代码。`$("#userpassword").click()`监听`id`为`userpassword`的元素的点击事件，当该事件触发时，`attr("type","password")`会将输入框的类型更改为`password`。 请注意，这种方法并不是万无一失的，因为不同的浏览器可能有不同的行为和兼容性。有些浏览器可能仍然会尝试填充之前保存的密码，尽管输入框类型已经改变。另外，为了提升用户体验，可以在用户完成输入或离开输入框（例如通过`blur`事件）时，将类型切换回`text`，以隐藏输入的密码内容，除非用户正在查看页面源代码。 此外，还可以尝试其他的解决方案，比如创建一个隐藏的真实密码输入框，以及一个显示的非密码输入框，通过JavaScript在两者之间切换。或者，使用自定义的自动完成功能，完全替代浏览器的默认行为。 解决`autocomplete="off"`在Chrome中失效的问题需要理解浏览器的自动填充机制，并利用JavaScript进行适当的交互控制。同时，开发者应始终关注浏览器更新和新的最佳实践，以确保代码的兼容性和安全性。