HTML <input> 标签如何屏蔽浏览器的自动填写？

最新推荐文章于 2024-06-26 11:30:59 发布
最新推荐文章于 2024-06-26 11:30:59 发布
阅读量325 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhaoziwei/p/10723046.html
本文探讨了在HTML中使用autocomplete=off和readonly属性来禁用输入框自动完成功能的有效性。实测发现，autocomplete=off并不总是有效，而readonly在Safari浏览器下也存在限制。文章提出了在特定情况下解决此问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • autocomplete = "off"，实测无效。
<input type="text" autocomplete = "off"/>



  • readonly，Safari 测试无效。
<input type="text" readonly onfocus="this.removeAttribute('readonly');"/>



  • 所以，应该怎么办才好呢？



转载于:https://www.cnblogs.com/zhaoziwei/p/10723046.html

【HTML+CSS】HTML ＜input＞ 元素详解：类型与常用属性
Xiaoxin的博客
07-29 3086
在HTML中，元素是最常用的表单元素之一，它允许用户输入数据。元素极其灵活，通过不同的type属性，它可以转变为文本框、密码框、提交按钮、单选按钮、多选按钮等多种不同类型的输入控件。同时，它还支持多种属性来控制这些控件的行为和外观。本文将详细介绍HTML元素的各种类型及其常见属性。
HTML 中的 input 标签详解
读心悦
05-16 1596
通过隐藏原生控件，使用 CSS 创建自定义样式。} </ style > < div class = " custom-checkbox " > < input type = " checkbox " id = " customCheck " > < span > </ span > < label for = " customCheck " > 自定义复选框 </ label > </ div >
防止浏览器自动填表
h_025的博客
04-08 485
今天在火狐浏览器中遇到这样的一个问题，就是当你在一个页面填写好表单数据的时候，这个时候你刷新，发现表单的内容都没有改变，这种现象会照成你写逻辑的时候照成逻辑上的错误。 这就是火狐替你自动填写了你刚才填写的东西，类似自动填表功能 为了防止出现这样的现象，你可以在表单中添加 autocomplete="off" ，然后就不会出现这种现象了。
input 输入框 禁止浏览器自动填充问题
Hruibin的博客
03-23 1474
html中 可通过原生html事件修改属性 <input type="password" placeholder="请再次输入密码" readonly="readonly" autocomplete="off" onfocus="this.removeAttribute('confirmPwd')" > vue中 html代码： <input type="text" placeholder="请输入手机号 / 电子邮箱" readonly="readon
禁止浏览器自动填充
weixin_30564785的博客
04-07 144
前情提要： 浏览器的自动填充很好用，方便了用户的重复账号和密码的输入，但是经常有错误的自动填充或者程序中不需要的自动填充 我的一个非登录页面中有一个input type=“text” 的标签，就遇到了这样的困扰 <input type="text" class="text address" autocomplete="off" value="@Model.Address" id=...
html防止浏览器表单自动填充,禁止浏览器input表单自动填充
weixin_35756624的博客
06-02 1119
最近开发遇到了一个令人头疼的事儿--浏览器input表单的自动填充行为。在type类型是password附近的input都会被自动填充上信息。这个是不程序行为，而是浏览器自动填充。对于这个功能我深恶痛绝。首先从程序角度看，回来结果变的不可控，明明是一段规范的代码产生的结果出乎意料，我们最讨厌这些出乎意料的结果。更甚，有些国产浏览器达到发指的地步，它居然能覆盖你设置的默认表单的值。为空的时候你自动填...
web安全：防止浏览器记住或自动填写用户名和密码(表单)的最简单终极解决方案
cxz
06-24 1413
背景 最近项目上有一个功能是忘记密码的，里面有手机号码，验证码，登录密码这几个选项，然后手机密码又不是登录账号，然后密码用的是el input 里面的type = “password”，导致了修改密码成功之后，验证码还有密码会被谷歌浏览器自动保存 在网上搜了一圈，发现都是不完美的，不兼容全部的浏览器，于是只能自己摸索了， 解决方案 其实方案很简单，只需要在修改成功后,then里面 获取到input的节点属性，然后把他的value设为“”即可 代码如下 <el-input v-model="form.
HTML5 ＜iframe＞ 标签、HTML5 ＜input＞ 标签
thgj0006的博客
04-12 1169
iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 标签规定了用户可以在其中输入数据的输入字段。 元素在 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>学生基本信息录入</title> </head> <body> <h1>学生基本信息录入</h1> <form action="/submit_student_info" method="post"> <label for="account">账号:</label> <input type="text" id="account" name="account"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label>性别:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label>兴趣:</label> <input type="checkbox" id="sports" name="hobbies" value="sports"> <label for="sports">打球</label> <input type="checkbox" id="art" name="hobbies" value="art"> <label for="art">画画</label> <input type="checkbox" id="study" name="hobbies" value="study"> <label for="study">学习</label><br><br> <label for="education">学历:</label> <select id="education" name="education"> <option value="primary">小学</option> <option value="middle">初中</option> <option value="high">高中</option> <option value="university">大学</option> </select><br><br> <label for="bio">简介:</label><br> <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br> <label for="photo">照片上传:</label> <input type="file" id="photo" name="photo"><br><br> <input type="submit" value="确定"> <input type="reset" value="重置"> </form> </body> </html> 运行结果
最新发布
05-24
例如，`<input>`标签可用于姓名、年龄等字段的数据采集[^1]。 2. **验证机制** 利用HTML5内置属性（如 `required`, `pattern`），可以在前端完成基本的数据校验工作，从而减少无效数据的提交可能性。 3. **交互...
HTML5 <input> 新增属性详解
这允许输入字段在不包含在`<form>`标签内的情况下仍然与表单关联。 4. **formaction**：此属性允许你指定表单数据提交的URL，覆盖默认的表单`action`属性。 5. **formenctype**：此属性定义了在提交表单时数据的...
阻止浏览器自动填充input密码框
liubt817的博客
09-05 3807
使用随机的字段名称：将密码输入框的 name 属性设置为一个随机的值，例如将其设置为一个长字符串或随机生成的唯一标识符。这样可以绕过浏览器的自动填充机制，因为浏览器通常是通过字段名称来判断是否自动填充密码的。此外，这些方法仅适用于阻止浏览器自动填充密码，而并非完全禁用浏览器的密码管理功能。用户仍然可以手动输入或选择保存密码。使用 autocomplete=“new-password” 属性：在密码输入框中添加 autocomplete=“new-password” 属性，这会告诉浏览器不要自动填充密码。
禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)
qq_51667621的博客
06-26 8195
解决input在不同浏览器中自动填充以及填充提示的问题，以谷歌、火狐、Edge(原IE)等浏览器为例，禁止出现自动填充，提高用户隐私和网站的安全性。
阻止浏览器标签页自动关闭
伊伊的博客
05-18 1228
阻止浏览器标签页自动关闭方法
html input表单禁止浏览器自动填充使用过的值
陈万洲的专栏
05-05 5373
网上的解决方案是在标签中加 autocomplete="off"但是问题是360浏览器，根本没效果。    最后自己想出一个办法，进入页面时，用js重置表单为空值。但是效果并不明显，后来想可能是浏览器等待标签渲染完成时间，浏览器再给表单赋值，js执行早于了这个渲染结束时间。    于是我又想等待1秒后执行，发现有时可以，有时又不行，然后把时间设2秒，基本都就可以了，但是要等一段时间，才能看到表单被...
html input 禁止浏览器自动填充
软件工程小施同学 的专栏
08-27 1417
额外增加一行代码<input type="password" hidden autocomplete="new-password"> 兼容Chrome
禁止浏览器自动填写表单
weixin_34376986的博客
12-27 1295
2019独角兽企业重金招聘Python工程师标准>>> ...
如何去除浏览器input自动填充效果
热门推荐
发光的萤火虫
04-19 3万+
今天写登录界面的输入框时输入框时，发现一个问题。 我的登录界面两个输入框的大体代码如下： <input type="text" name="username" class="input-text" placeholder="username"/> <input type="password" name="password" class="input-text" placeh...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值