禁止浏览器自动填充用户名和密码

前端解决使用input框的自动填充和浏览器缓存密码问题 前端解决使用input 框的自动填充和浏览器缓存密码问题 阅读详情

​ 今天在项目中遇到了一个非常诡异的情况,在页面上点击修改密码后,主页面的分页组件中的页码跳转input框会自动填充当前登录用户名,经过多番查询和尝试,找到了问题的根本原因,浏览器对于用保存过的户名和密码有自动填充功能,关掉自动填充功能成功解决上述问题。

  • 方法一:设置autocomplete为off,适用于普通文本框

    //用户名
    <input type="text" autoComplete="off"/>
    
  • 方法二:设置autocomplete为new-password,适用于密码输入框

    //密码
    <input type="password" autoComplete="new-password"/>
    

    需要注意的是在JSX中使用时,需注意大小写问题,必须为autoComplete,否则无效。

  • 方法三:针对密码自动填充,需添加不显示的input且type等于password

    //用户名
    <input type="text" style="position:absolute;z-index:-999"/>
    或者
    <input type="text" style="display:none"/>
    //密码
    <input type="password" style="position:absolute;z-index:-999"/>
    或者
    <input type="password" style="display:none"/>
    
如何关闭input表单自动填充input autocomplete 百度地图和高地图地址下拉选择如何关闭input表单自带的自动填充input autocomplete 阅读详情

相关推荐

python气象数据可视化学习笔记8——利用matplotlib和ERA5数据绘制时间-高度气象综合廓线图

利用matplotlib和ERA5数据绘制时间-高度气象综合廓线图

qiuylulu的博客 8064

如何避免浏览器自动填充密码

如何避免浏览器自动填充密码

brilliantSt的博客 2224

Windows环境下如何通过MCP Server实现MySQL安全连接与AI集成?

本文详细介绍了在Windows环境下如何通过MCP Server实现MySQL安全连接与AI集成。MCP Server作为大模型与MySQL之间的安全通道,提供权限控制、SSL加密和协议转换功能,显著提升查询性能。文章包含环境配置、安装指南、安全策略及实战案例,帮助开发者高效实现AI与数据库的安全交互。

hill8的博客 720

前端:input 标签取消账号填充

【代码】前端:input 标签取消账号填充。

彭世瑜的博客 2342

揭秘无人机前沿领域的科技新突破

本文旨在系统性地介绍无人机技术在前沿领域的最新突破,涵盖从基础理论到实际应用的各个方面。我们将重点关注那些正在改变无人机行业面貌的关键技术创新,并分析它们对未来发展的影响。文章首先介绍无人机技术的基础概念和背景,然后深入探讨六个关键领域的技术突破,接着分析实际应用案例,最后展望未来发展趋势。自主导航系统(SLAM):同时定位与地图构建技术,使无人机能在未知环境中自主导航计算机视觉(CV):使无人机能够"看"和理解周围环境的技术5G通信:第五代移动通信技术,提供高速、低延迟的数据传输能源管理。

AI天才研究院 1490

如何用Python+Librosa实现轴承异响检测?5步搞定工业设备故障预警

本文详细介绍了如何利用Python和Librosa库,通过5个步骤构建工业轴承异响检测与故障预警系统。从音频采集、预处理、频谱特征提取,到构建机器学习模型并进行实时监测,提供了完整的代码级解决方案。该方法能有效识别轴承早期故障特征,实现低成本、高效的设备预测性维护。

rnn9storyteller的博客 632

阻止浏览器自动填充input密码框

使用随机的字段名称:将密码输入框的 name 属性设置为一个随机的值,例如将其设置为一个长字符串或随机生成的唯一标识符。这样可以绕过浏览器的自动填充机制,因为浏览器通常是通过字段名称来判断是否自动填充密码的。此外,这些方法仅适用于阻止浏览器自动填充密码,而并非完全禁用浏览器的密码管理功能。用户仍然可以手动输入或选择保存密码。使用 autocomplete=“new-password” 属性:在密码输入框中添加 autocomplete=“new-password” 属性,这会告诉浏览器不要自动填充密码。

liubt817的博客 4259

【以太网硬件十二】以太网端口自协商过程解密之二

简述以太网端口自协商的过程

highman110的博客 2487

禁止浏览器自动填充密码,用户名的问题

最近在项目中遇到一个问题,系统管理员在页面添加普通用户时候,浏览器会在用户名和密码框自动填充当前登录用户名和密码,在网上搜索很多,找到几种办法,亲测第三,四种方法有效,建议使用第四种 方法一:设置autocomplete=‘off’,适用于普通文本框 //用户名 <input type="text" autoComplete="off" name='name'/> 方法二:设置aut...

weixin_44541046的博客 1209

u-boot-2014.10移植第22天----添加nand flash命令支持(四)

解决问题:nand0: MTD Erase failure: -5 drivers/mtd/nand/nand_bbt.c文件中初始化bbt/* * Allocate memory (2bit per block) and clear the memory bad block * table. */ this->bbt = kzalloc(len, GFP_

fulinux的博客 3631

挖矿病毒解决实例(隐藏进程,文章较好)(入侵)

CPU起飞了 最近有朋友在群里反馈,自己服务器的CPU一直处于高占用状态,但用top、ps等命令却一直找不到是哪个进程在占用,怀疑中了挖矿病毒,急的团团转。 根据经验,我赶紧让他看一下当前服务器的网络连接,看看有没有可疑连接,果然发现了有点东西: 上Shodan查一下这IP地址: 反向查找,发现有诸多域名曾经解析到这个IP地址: 这是一个位于德国的IP地址,开放了4444,5555,7777等数个特殊的服务端口: 其中这位朋友服务器上发现的连接到的是7777端口,

墨痕诉清风的博客 1万+

禁止浏览器自动填充用户名密码

有时页面字段不希望浏览器自动填充用户名和密码,可以在&lt;input&gt;中使用 autocomplete="off"  测试对chrome和firefox有效,对IE没有测试。

sinoalex 260

基于知识图谱的档案智慧问答系统:构建智能化档案管理与知识服务新范式

基于知识图谱的档案智慧问答系统是档案管理领域的一次重要创新,它通过将档案数据转化为结构化的知识图谱,并结合自然语言处理和智能问答技术,实现了档案信息的智能化管理与服务。该系统不仅能够提升档案管理的效率,还能为用户提供更全面、更便捷的知识服务,具有广泛的应用前景和深远的社会意义。未来,随着技术的不断进步和应用场景的不断扩展,基于知识图谱的档案智慧问答系统将在更多领域发挥其价值,为档案管理领域的智能化转型提供强有力的支持。

qq_62634009的博客 1575

elementui 输入框里面禁止浏览器自动填充用户名密码

问题1 浏览器这功能在登录的时候挺好用的,但是在注册和管理的时候就很难受了 所以 在普通的input上直接off就行了 <input type="password" autoComplete="off"/> 而在elementui上使用autoComplete="off"是没用的 得使用new-password <el-input v-model="form.password" show-password auto-complete="new-password"></el-

qq_44552416的博客 5476

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

elementui 禁止浏览器自动填充用户名密码

浏览器这功能在登录的时候挺好用的,但是在注册和管理的时候就很难受了 所以 在普通的input上直接off就行了 <input type="password" autoComplete="off"/> 而在elementui上使用autoComplete="off"是没用的 得使用new-password <el-input v-model="form.password" sho...

Teler的博客 1万+

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

elementui 禁止浏览器自动填充用户名或密码

给 el-input 元素添加 readonly 属性,并在 el-input 元素获得焦点时,移除 readonly 属性。 关键代码: readonly οnfοcus="this.removeAttribute('readonly');" elementui 禁止浏览器自动填充密码,代码示例如下: <el-form-item v-show="dialogType === 'add'" label="密码" prop="password" title="密码强度要求:需包

qq_36291747的博客 1349

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

Vue禁止自动填充浏览器用户名密码

https://www.zhihu.com/question/23529765 综合以上答案 可以这样写,但是我也只是测试了chrome与firefox,可行的 用户名:<input type="text" autocomplete="new-accounts"> 密码:<input type="text" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly');this.type='pa

XY02120624的博客 1727

element UI的form 禁止浏览器自动填充用户名或密码

浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内,如果在登录页面,这是期望的,但是如果在注册页面、新增账号等页面,这就是超出需求了, 普通的form表单内的input设置autoComplete="off"就可以了 <input type="password" autoComplete="off"/> 但是在element UI里面设置autoComplete="off"是不生效的,需要设置为new-password <el-input v-mo

weixin_45024732的博客 2011

问题(05)elementui 输入框里面禁止浏览器自动填充用户名密码、弹出浏览器历史密码提示框

elementui 输入框里面禁止浏览器自动填充用户名密码、弹出浏览器历史密码提示框

dugujiuding的博客 2206

Javaweb--如何让登陆页面的表单不默认显示账号和密码

楼主做Javaweb项目,制作登陆页面访问时总是出现用户名和密码被自动填写的情况;如何清除密码,禁止表单显示账户密码,列出问题的解决方案

山顶雨人 7414

关于360浏览器自动填充用户名和密码的问题

关于360浏览器自动填充用户名和密码的问题在工作中领导要我想一个问题,关于360浏览器会自动填充密码和用户名的问题,而且该死的input框还会变成屎黄色,丑到爆(用户端也可以自行设置浏览器不保存密码)首先分享一下我的总结: * 一般都是cookie记住用户名和密码。可以设置禁止用户修改cookie,osc就这样做了! eg: PHP4 header("Set-Cookie: hidden=

Wisdom_Qiu的博客 1万+

浏览器记住密码,对应字段有问题,如何解决?

注册表单有三项,【手机号】【短信验证码】【密码】,提交之后浏览器提示【记住密码】,可是把短信验证码当做用户名记住了。 该问题大致有以下几种解决办法:1、调整密码框位置,即将密码框放在手机号下面。2、改变交互,比如将验证码置于二级交互,即输入完手机号和密码,点击登录,然后再输入验证码,类似于阿里云的控制台3、禁止自动填充浏览器记住的密码,该方案可参考:怎么禁止自动填充浏览器记住的密码? ...

weixin_33825683的博客 248
上一篇: JavaScript实现高强度密码校验
下一篇: 函数防抖和节流
codezha
博客等级 码龄10年 28粉丝 98原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值