网页input框自动填充问题

autocomplete

大部分查询解决办法是设置,autocomplete=off,关于autocomplete的含义,官网参考如下:

HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN

在 autocomplete 的文档中说明了 value 为 off 时,浏览器禁止给当前字段自动的输入或者选中一个值,但下方 Note 言明: 在大多数现代浏览器中,off 值不能阻止浏览器的密码管理工具自动填充。

可以使用如下几种方式解决:

# 方式一 : 动态设置密码 input 标签 type
<input type="text" onfocus="this.type='password'"></input>

这样设置 可以保证用户在点击密码框之前,避免浏览器识别为登录表单、自动填充。

浏览器是如何判断当前表单需要 autocomplete,浏览器自动保存表单是当前 form 存在 type 为 password 的 input、且该 input 为表单中的第二个 input 输入框。

所以,这里给 password 设置初始 type 为 text,在用户 点击 input 聚焦后 设置 type 为 password ,避免浏览器在 页面 onload 之后判断登录表单进行回填。这样可以解决大部分场景下对于避免回填的需要。然而我们的业务需要 依据跳转链接中的 param 给用户填充 密码,这就导致了在用户 主动 focus 之前,密码会被明文展示,聚焦后又会隐藏,操作体验不佳;

# 方式二 : page.onload 后 js 控制 input type

方法同上,问题点在于 页面 load 后手动设置 input type 为 password,而后根据 page url 参数 填充表单。

但存在问题是 浏览器填充的时机无法控制,导致业务填充表单被自动填充覆盖;方案 pass;

# 方式三: new-password

autocomplete 除了 on、off 之外,还有很多参数: name、email、username、new-password、current-password、street-address 等等;

当 input type 为 password 但 autocomplete 为 new-password, 即可解决浏览器自动填充问题,浏览器将当前输入框识别为新密码,便不会自动填充。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/541415.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Canvas与艺术】绘制黄色三角生化危险标志

【关键点】 系统函数arcTo函数的用法及自编函数createRegTriArr的灵活运用。 【成果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head>&…

ZooKeeper分布式服务与Kafka消息队列+ELKF整合方案

前言 ZooKeeper 是一个分布式的、开放源码的分布式应用程序协调服务&#xff0c;提供配置维护、命名服务、分布式同步、组服务等功能&#xff1b; Kafka 是一个开源的分布式流处理平台&#xff0c;它被设计用来处理实时数据流&#xff0c;包括发布和订阅消息系统、日志收集以…

napi系列学习进阶篇——NAPI生命周期

什么是NAPI的生命周期 我们都知道&#xff0c;程序的生命周期是指程序从启动&#xff0c;运行到最后的结束的整个过程。生命周期的管理自然是指控制程序的启动&#xff0c;调用以及结束的方法。 而NAPI中的生命周期又是怎样的呢&#xff1f;如下图所示&#xff1a; 从图上我们…

WordPress 图片压缩插件:Compress JPEG PNG images 使用方法

插件介绍 Compress JPEG & PNG images是一款非常好用的图片压缩插件:&#xff0c;非常值得大家安装使用&#xff1b;特别是图片类型网站。其实我们很多服务器磁盘空间是不在乎多那么几十 MB 大小的&#xff0c;但是压缩了图片能提升网站速度&#xff0c;节省宽带&#xff…

入门:多层感知器Multiple-Layer Perceiver, MLP

本文将简单介绍多层感知器&#xff08;MLP&#xff09;的基本概念、原理和应用。MLP是一种前馈人工神经网络&#xff0c;由多层节点组成&#xff0c;每层节点通过权重和偏置与下一层节点相连。MLP在许多领域都有广泛的应用&#xff0c;如分类、回归、自然语言处理等。 本文将分…

软考数据库---2.SQL语言

主要记忆&#xff1a;表、索引、视图操作语句&#xff1b;数据操作&#xff1b;通配符、转义符&#xff1b;授权&#xff1b;存储过程&#xff1b;触发器 这部分等等整理一下: “”" 1、 数据定义语言。 SQL DDL提供定义关系模式和视图、 删除关系和视图、 修改关系模式的…

基于ssm的大学生租房平台的设计与实现(java源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的大学生租房平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 大学生租房平台的设计与实现的主…

Python数据分析可视化之Pandas的使用

一、项目介绍 数据获取与存储&#xff1a;能够使用Python财经数据接口包tushare下载股票交易数据&#xff0c;并将数据保存到CSV文件或MySQL数据库中。数据处理&#xff1a;能够用Pandas从CSV文件、Excel文件以及MySQL数据库中读取数据。能够使用Pandas对数据进行简单处理和深…

某狗网歌曲接口逆向之加密算法刨析

逆向网址 aHR0cHM6Ly93d3cua3Vnb3UuY29t 逆向链接 aHR0cHM6Ly93d3cua3Vnb3UuY29tL21peHNvbmcvN2dxcGVzNjguaHRtbA 逆向接口 aHR0cHM6Ly93d3dhcGkua3Vnb3UuY29tL3BsYXkvc29uZ2luZm8 逆向过程 请求方式&#xff1a;GET 逆向参数 signature:1898d8f157837fadc9751fdacf1398f9 …

天猫精灵要会员,不能听歌,还能用来干什么呢?榨干它的剩余价值

目录 起因&#xff1a;以听歌为主要功能的设备&#xff0c;却不能听歌了 1.蓝牙音箱 2.控制智能家电 3.万能遥控器&#xff0c;需要一个外接设备 4.倒计时/提醒&#xff0c;闹钟提醒&#xff0c;整点提醒&#xff08;这功能有人不喜欢&#xff0c;闲吵&#xff0c;还不能关…

职场证件照:不只是一张照片那么简单,这些细节请注意

随着毕业季的到来&#xff0c;许多应届生已经开始在各自的岗位上实习&#xff0c;准备迎接转正的挑战。在这个过程中&#xff0c;一张得体的职场证件照将成为你职业生涯中的一张重要名片。在职场中&#xff0c;证件照的应用场景多种多样&#xff0c;从窗口岗位的公示到工作牌上…

Pytorch Windows EOFError: Ran out of input when num_workers>0

关于深度学习的一些学习框架,我使用过pytorch,caffe,caffe2,openchatkit,oneflow等,最近我将长达几十万字的报错手册重新进行了整理,制作出一个新的专栏,主要记录这几种常见的开发框架在安装和使用过程中常见的报错,以及我是如何解决掉的,以此来帮助更多的深度学习开…

紫光展锐T610平台_4G安卓核心板方案定制开发

紫光展锐T610核心板配备Android 11操作系统&#xff0c;采用12nm制程工艺。该处理器CPU由2颗基于Cortex-A75架构的大核心和6颗基于Cortex-A55架构的小核心组成&#xff0c;最高主频为1.8GHz。GPU采用的是614.4MHz的Mali G52&#xff0c;可以流畅播放2400*1080分辨率视频&#x…

maven之pom中的build标签

1、build标签分类 1.1、全局配置&#xff08;project build&#xff09; 针对整个项目的所有情况都有效。 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation"htt…

知道智源开源最强语义向量模型BGE是什么吗?

Embedding模型作为大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;的一个重要辅助&#xff0c;是很多LLM应用必不可少的部分。但是&#xff0c;现实中开源的Emebdding模型却很少。北京智源人工智能研究院&#xff08;BAAI&#xff09;开源了BGE系列Emb…

Proxmox VE qm 方式恢复虚拟机

前言 使用qm 恢复Proxmox VE虚拟机&#xff0c;高效便捷。 登录Proxmox VE shell 执行恢复操作 假设备份好的文件在其它主机存储&#xff0c;我们可以下载到Proxmox VE本地目录下&#xff0c;如何执行虚拟化恢复操作--storage local-lvm&#xff08;恢复后存储到的位置&…

【linux】TCP编程{三次握手/四次挥手/API注意点/代码}

文章目录 1.API介绍1.1wc -l dirName1.2inet_pton1.3inet_aton1.4inet_ntop 2.三次握手与四次挥手1.三次握手2.四次挥手3.应用程序和TCP协议层如何交互总结 3.TCP 和 UDP 对比1.宏观2.详细 4.地址转换函数inet_ntoa 5.TCP编程代码Makefiletcp_client.cctcp_server.cctcp_server…

TypeScript学习--day1

一、介绍 TypeScript是JS的超集&#xff0c;为JS添加了类型支持。 1.1 为什么添加类型支持 JS代码的错误大部分是类型错误&#xff0c;增加改Bug时间&#xff0c;影响开发效率。 静态类型&#xff1a;编译期做类型检查 动态类型&#xff1a;执行期做类型检查 TS--静态类型编…

前端保留两位小数

一、保留两位小数&#xff08;四舍五入&#xff09; 解决方案&#xff1a;使用 toFixed(x) 方法可以对小数进行指定位数保留&#xff0c;其中x是要保留的位数用法&#xff1a;num.toFixed(x)&#xff0c;其中num为需要操作的数据&#xff0c;x为要保留的位数示例&#xff1a;1…

力扣LeetCode138. 复制带随机指针的链表 两种解法(C语言实现)

目录 题目链接 题目分析 题目定位&#xff1a; 解题思路 解题思路1&#xff08;粗暴但是复杂度高&#xff09; 解题思路2&#xff08;巧妙并且复杂度低&#xff09; 题目链接 138. 复制带随机指针的链表https://leetcode-cn.com/problems/copy-list-with-random-pointer/ …