禁止浏览器记录文本框之前输入过的内容

青旅半醒 2022-05-15 01:13 733阅读 0赞

今天碰见了一个问题，要清除下图中的下拉的值

（浏览器自动记录之前输入的值）

当满足以下2个条件时，浏览器会自动记录输入过的值，当用户再次输入的时候就能自动完成；

1、input标签在form标签下；

2、点击了此form标签下的submit按钮；

具体的表现形式如下图，当我输入用户名的时候，浏览器会自动显示我之前输入过的用户名

![70][]

通常我们会在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"

解决这个情况的方法有两种

一、是为input标签添加autocomplete属性并设为off

<input class="text" autocomplete="off" type="text" name="username" value="">

二、是在form表单上添加autocomplete属性并设为off

<form method="post" action="" name="login" autocomplete="off">
     
    </form>

顺便介绍下autocomplete；

autocomplete是HTML5 中的新属性它规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>on</td> 
   <td>默认。规定启用自动完成功能。</td> 
  </tr> 
  <tr> 
   <td>off</td> 
   <td>规定禁用自动完成功能。</td> 
  </tr> 
 </tbody> 
</table>

三、但是有一种情况例外，就是表单中有input\[type="password"\]，点击保存密码后，在Chrome浏览器还是自动填充了用户名和密码的输入框；为了统一样式，我们需要就对Chrome的问题经行单独处理。

解决方案如下：

可以在不需要默认填写的input框中设置 autocomplete=**"new-password"**

**   **网上没有找到对其详细解释，但是发现163网易免费邮的邮箱帐号登录是这么用的，

![70 1][]

所以就借鉴借鉴咯，测试之后也是可以解决问题的，也是最简单的解决办法，网易给您点个赞！

[70]: /images/20220515/3bc3fa7ebef649739e61652672f2da94.png
[70 1]: /images/20220515/7964499d73114d86ad75745e3a5d5668.png

发表评论取消回复

表情：

评论列表（有 0 条评论，733人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE浏览器在文本框内输入中文汉字内容时，组件布局发生位移位置错乱

最近做项目用需要用到IE浏览器显示表单，结果发现只有在IE显示异常，这是因为在IE11中打开该网页，在文本框中输入中文，文本框的位置立刻往下偏移1像素。去掉中文后，位置又

迈不过友情╰/ 2024年03月26日 18:15/ 0 赞/ 31 阅读

相关 HTML5获取autoComplete属性：告诉浏览器是否记录之前的输入值

autoComplete默认为on代表是否让浏览器自动记录之前输入的值很多时候，需要对客户的资料保密，防止浏览器软件或者恶意插件获取到

- 日理万妓/ 2022年11月22日 12:40/ 0 赞/ 140 阅读

相关 HTML中控制input文本框输入内容

1.控制input只能输入正整数 <input onkeyup="if(this.value.length==1){this.value=this.value.r

谁借莪１个温暖的怀抱￠/ 2022年10月28日 13:24/ 0 赞/ 2 阅读

相关【JavaScript】——限制文本框输入内容

这几天，项目开始走测试流程了，组长让我们都把做过的功能的细节方面，完善一下。限制文本框输入长度啊，弹出框样式啊。然后，就开始了漫长补洞的时间。项

女爷i/ 2022年07月19日 11:53/ 0 赞/ 281 阅读

相关 Linux 回溯之前输入过的命令

用过Matlab的朋友都知道，输入命令的第一个字母，然后按向上的箭头可以返回到之前您输入过的包含该字母的命令，这种便捷的回溯方式在Linxu中也可以使用。

落日映苍穹つ/ 2022年06月10日 12:09/ 0 赞/ 192 阅读

相关 java--oncopy()/onpaste():禁止文本框等内容复制粘贴

针对页面某一文本框或其他内容，加上oncopy和onpaste方法，不允许复制与粘贴： <input type="text" name="textfield" οn

太过爱你忘了你带给我的痛/ 2022年05月26日 21:29/ 0 赞/ 286 阅读

相关禁止input文本框输入实现属性

readonly、disabled、autocomplete 1.readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选

心已赠人/ 2022年05月22日 06:12/ 0 赞/ 184 阅读

相关禁止浏览器记录文本框之前输入过的内容

今天碰见了一个问题，要清除下图中的下拉的值（浏览器自动记录之前输入的值）当满足以下2个条件时，浏览器会自动记录输入过的值，当用户再次输入的时候就能自动完成； 1、in

青旅半醒/ 2022年05月15日 01:13/ 0 赞/ 734 阅读

相关 textarea文本框根据输入内容自适应高度

![20190523113938550.png][] <textarea oninput="autoTextAreaHeight(this)" ></textar

素颜马尾好姑娘i/ 2022年01月28日 05:27/ 0 赞/ 355 阅读

相关使input文本框随输入内容变化长度的方法

[转发自：https://blog.csdn.net/superit401/article/details/72473318][https_blog.csdn.net_sup

悠悠/ 2021年09月18日 13:36/ 0 赞/ 795 阅读