form表单防止浏览器自动填充解决方法

最新推荐文章于 2023-07-21 14:22:23 发布
置顶 最新推荐文章于 2023-07-21 14:22:23 发布
阅读量6.4k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： JSP HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lluohuih/article/details/79911292
本文介绍如何通过在HTML表单元素中使用autocomplete属性来防止浏览器自动填充表单。通过设置autocomplete为off或new-password可以有效避免表单被浏览器自动填充。

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

form表单防止浏览器自动填充，示例如下：

 

<input type="text" autocomplete="off" name="userName"/>
<input type="password" autocomplete="new-password" name="password"/>

分别加上：autocomplete="off" 和 autocomplete="new-password" 就可以了

form表单禁止浏览器自动填充密码
IT博客技术分享
07-12 2519
form表单禁止浏览器自动填充密码
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
09-03
总之，去除Chrome浏览器的表单自动填充默认样式，可以采用覆盖CSS样式、JavaScript动态替换或者禁用自动填充的方式。在实际应用中，根据具体需求和场景选择合适的方法，既能保持网页设计的一致性，又能兼顾用户使用...
禁止表单自动填充
qiao
09-16 768
禁止浏览器表单自动填充 普通文本框添加 autocomplete=“off”，密码输入框添加 autocomplete=“new-password”。 <input type="text" autocomplete="off" name="userName"/> <input type="password" autocomplete="new-password" name="p...
禁止浏览器表单自动填充
caoning315629的博客
10-16 210
普通文本框添加autocomplete="off"，密码输入框添加autocomplete="new-password"。 <input type="text" autocomplete="off" name="userName"/> <input type="password" autocomplete="new-password" name="password"/&...
关闭表单自动填充和自动填充密码
bidang3275的博客
08-07 1751
浏览器默认会开启表单的自动填充。 1. 给整个表单设置禁用自动填充 在 form 标签中，添加 autocomplete 属性，并且值为 off。 <form method="post" action="/form" autocomplete="off"> ... </form> 2. 给单独一个输入元素禁用自动填充 在输入元素标签中，添加 autocomplete 属性，并且值为 off。 <form method="post" action="/form">
Vue+element 解决浏览器自动填充记住的账号密码问题
12-10
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉 不行,我的代码必须由我...
解决浏览器会自动填充密码的问题
08-30
在form表单或input框上添加autocomplete="off"属性可以禁止浏览器自动填充密码。但是，这个方法在谷歌和火狐浏览器上存在bug。 解决方法二：使用disabled属性 可以使用disabled属性来禁止浏览器自动填充密码。在 ...
登录系统保存账号密码后,当录入表单时会自动填充到表单的账号密码解决方案
筑梦人的博客
05-22 4172
在input框中加入:readonly onfocus="this.removeAttribute('readonly');"即可以解决此问题. 例如: <el-form-item label="邮箱" prop="username"> <el-input placeholder="请输入邮箱" v-model="re...
禁止浏览器缓存表单信息
清风自来
08-12 939
天天忙啊忙又好久木有来更新了，最近在整前端的时候，有禁止浏览器缓存form表单信息的需求，下面来记录并分享下禁止form表单的方法：
vue禁止谷歌浏览器，360浏览器自动填充form表单
小史同学的博客
05-05 2039
网上的答案五花八门，但是我试了好多都不能用 下面这个方法亲测有用 ········<el-form ref="tipform" :model="addUserInfo" :rules="rules" :label-width="dialog.formLabelWidth"> &lt...
如何禁止(表单)用户名、密码自动填充
05-18 542
浏览器一旦遇到 type="password"的控件，就会把密码自动填充到该控件。 解决方案一： step1:打开IE浏览器 step2:打开Internet选项中的内容，如下 取消勾选即可。 解决方案二： 比如HTML如下： <input type="password" name="admin_pwd" minlength="6" required="t...
element UI的form 禁止浏览器自动填充用户名或密码
weixin_45024732的博客
07-26 1856
浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内，如果在登录页面，这是期望的，但是如果在注册页面、新增账号等页面，这就是超出需求了， 普通的form表单内的input设置autoComplete="off"就可以了 <input type="password" autoComplete="off"/> 但是在element UI里面设置autoComplete="off"是不生效的，需要设置为new-password <el-input v-mo
如何关闭input表单自动填充input autocomplete
phplife的电子商务网上商城专栏
05-20 2467
百度地图和高地图地址下拉选择如何关闭input表单自带的自动填充input autocomplete
去除浏览器自动填充和提示密码功能
heerey525
09-18 1696
本来我没有把这个当回事，因为在我的映像中就是在input标签加上一个  autocomplete="off" eg： 方法一（是最先想到的也是最简单的） &lt;input type="password" autocomplete="off" &gt; 方法二（在form内最前面加上隐藏的来接收填充值和提示） &lt;input style="display:none" type=&quot
去除浏览器自动填充账号密码功能简单并100%有效
一个网络搬砖的斜杠青年
07-21 1178
他是根据input标签的type属性进行算法计算，满足条件会自带上次输入过的账号密码（目测：type="text"后紧接着type=“password”）的极容易出现填充。先在页面不使用type=“password”，欺骗浏览器我没有使用密码框。当我实际输入密码时，获取焦点（focus）把自身input的type属性再改成“password” ------ “告诉浏览器，我不是密码框”保守点：把前面的账号也改一下，欺骗浏览器说：“我不是账号框”// 长得样式跟text一样。
解决浏览器自动填充账户密码问题
weixin_50352816的博客
03-12 277
readonly 解决浏览器自动填充账户密码问题
vue实现登录页阻止/避免浏览器对输入框的自动填充（element UI）
elephant_my的博客
03-16 6100
vue实现登录页阻止浏览器自动填入1. 效果图2. 详细解析2.1 输入框代码2.2 参数说明3. 完整代码 1. 效果图 浏览器自动填入的效果图如下： 2. 详细解析 2.1 输入框代码 <el-form-item label="登录名" prop="idNo"> <el-input v-model="loginForm.idNo" placeholder="请输入邮箱/手机号/登录名"></el-input> </el-form-item> &l
代码怎么实现防止浏览器自动填充账号密码
最新发布
11-21
在JavaScript中，为了防止浏览器自动填充账号密码，你可以利用一些HTML5的特性以及用户交互行为来实现。以下是几种常用的方法： 1. **禁用浏览器自动填充功能**： ```html <form> <input type="password" autocomplete="off"> <!-- 其他输入字段 --> </form> ``` `autocomplete="off"`属性可以告诉浏览器不要自动填充表单数据。 2. **使用隐藏域**： 可以创建一个不可见的隐藏输入字段，用于保存实际的登录信息，然后在用户输入时验证。 ```html <input type="hidden" id="savedPassword" value=""> <input type="text" oninput="validateInput(this)"> ``` ```javascript function validateInput(input) { if (input.value === savedPassword) { // 如果等于保存的密码，说明来自浏览器自动填充 input.value = ""; // 清空输入 alert("自动填充已禁用，请重新输入。"); } else { savedPassword = input.value; // 更新保存的密码 } } ``` 3. **添加焦点事件监听器**： 监听输入框获取焦点时，清除其内容。 ```javascript document.getElementById('username').addEventListener('focus', function(e) { this.value = ''; }); ``` 4. **结合服务器端验证**： 尽管前端可以做些工作，最终还是要依赖服务器端的验证，因为恶意攻击者可能会绕过浏览器的限制。 请注意，尽管这些策略能提供一定的保护，但并不能完全杜绝自动填充，因为某些浏览器允许用户选择性地禁用自动填充，并且现代浏览器越来越注重隐私和用户体验，所以最好还是让用户了解并接受自动填充的安全风险。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值