网页input框自动填充问题

news2025/6/9 20:34:33

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, 即可解决浏览器自动填充问题,浏览器将当前输入框识别为新密码,便不会自动填充。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Web】CTFSHOW-ThinkPHP5-6反序列化刷题记录(全)

目录 web611 web612 web613-622 web623 web624-626 纯记录exp&#xff0c;链子不作赘述 web611 具体分析&#xff1a; ThinkPHP-Vuln/ThinkPHP5/ThinkPHP5.1.X反序列化利用链.md at master Mochazz/ThinkPHP-Vuln GitHub 题目直接给了反序列化入口 exp: <?ph…

谷歌推出全新AI代码辅助工具Code Assist,挑战GitHub Copilot|TodayAI

在其Cloud Next大会上&#xff0c;谷歌推出了一款名为Code Assist的AI驱动代码完成工具。该工具原名为Duet AI&#xff0c;现增强了功能并与流行的编辑器兼容。 Code Assist不仅与GitHub的Copilot Enterprise直接竞争&#xff0c;还以百万级的token上下文窗口自豪&#xff0c;…

Cherno CPP学习笔记-01-背景知识

0、工具网站收集 C语言版本特性 https://en.cppreference.com https://www.cplusplus.com https://www.tutorialspoint.com/cplusplus https://www.learncpp.com https://github.com/fffaraz/awesomecpp https://stackoverflow.com 网页CPP编译器 [C] gcc 12.1.0 - Wa…

【Altium Designer 20 笔记】隐藏PCB上的信号线(连接线)

使用网络类隐藏特定类型的信号线 如果你想要隐藏特定类型的信号线&#xff08;例如电源类&#xff09;&#xff0c;你可以首先创建一个网络类。使用快捷键DC调出对象类浏览器&#xff0c;在Net Classes中右击添加类&#xff0c;并重命名&#xff08;例如为“Power”&#xff0…

Towards Street-Level Client-Independent IP Geolocation(2011年)(第二部分)

被引次数:306 Wang Y, Burgener D, Flores M, et al. Towards {Street-Level}{Client-Independent}{IP} Geolocation[C]//8th USENIX Symposium on Networked Systems Design and Implementation (NSDI 11). 2011. 接着Towards Street-Level Client-Independent IP Geolocati…

造船业的重要工具之一(火工平台)——河北北重厂家

火工平台是造船业的重要工具之一&#xff0c;它是用于火焰切割和焊接的设备。在造船过程中&#xff0c;需要对金属材料进行切割和焊接&#xff0c;以构建船体结构。火工平台可以提供高温火焰&#xff0c;使得金属材料可以被切割或焊接。 火工平台通常由两个主要部分组成&#…

【美团笔试题汇总】2024-04-13-美团春秋招笔试题-三语言题解(CPP/Python/Java)

&#x1f36d; 大家好这里是KK爱Coding &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新美团近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f…

sql server2008触发器

sql server在Navicat工具不能插入数据 可以去写代码插入&#xff0c;代码连接sql server可以插入 或者使用sql server专门的工具 BEGINdeclare a int;declare s t_amount;select a baddebt_age_id,srate from aa_baddebt_age;INSERT INTO dade(id,name) VALUES(a,s) END

Jackson 2.x 系列【16】反序列化器 JsonDeserializer

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 概述2. 方法2.1 构造2.2 反序列化2.3 null 处理2.4 空值2.5 其他 3. 实现类3.…

基于SpringBoot+Vue的健身器材用品网站(源码+文档+部署+讲解)

一.系统概述 随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决各种问题&#xff0c;必录德健身器材用品网展现了其蓬勃生命力和广阔的前景。与此同时&#…

Redis中的集群(九)

集群 消息 集群中的各个节点通过发送和接收消息(message)来进行通信&#xff0c;我们称发送消息的节点为发送者(sender),接收消息 的节点成为接收者&#xff0c;如图所示。节点发送的消息主要有以下五种: 1.MEET消息:当发送者接到客户端发送的CLUSTER MEET命令时&#xff0c…

# Nacos 服务发现-快速入门-创建服务消费者模块,使用 feign 调用 服务生产者

Nacos 服务发现-快速入门-创建服务消费者模块&#xff0c;使用 feign 调用 服务生产者 1、 新增 quickstart_consumer 子工程&#xff08;子模块&#xff09;&#xff0c; 创建子模块&#xff1a;--> 右键 nacos_discovery 父工程 --> Modules --> Maven --> G…

android gradle版本无法下载

android gradle版本无法下载问题解决方法 在引入一个新的android项目的时候&#xff0c;通常会因为无法下载gradle版本而一直卡在同步界面&#xff0c;类似于下面的情况。 这是因为gradle运行时首先会检查distributionUrlhttps://services.gradle.org/distributions/gradle-5.6…

·13·1dawwd

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

lv_micropython to download and building

想要在ESP32-C3使用Micropython开发GUI&#xff0c;所以需要编译lv_micropython&#xff0c;当前github上的版本是9.1.0。 一、开发环境 因为编译lv_micropython需要在linux系统下&#xff0c;但是我的电脑是windows系统&#xff0c;所以我在windows系统上安装了VMware虚拟机&…

牛客2024【牛客赛文X】春招冲刺ONT61 每日温度【hard 单调栈 Java、Go、PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/1f54e163e6944cc7b8759cc09e9c78d8 思路 单调栈最直接的应用就是获取数组中每个位置i,i的左边第一个比i大或者小的位置/数以及,i的右边第一个比i大或者小的位置/数不懂的同学看这里https://blog.csdn.net/Borsl…

Vulnhub靶机 DC-1渗透详细过程

Vulnhub靶机:DC-1渗透详细过程 目录 Vulnhub靶机:DC-1渗透详细过程一、将靶机导入到虚拟机当中二、攻击方式主机发现端口扫描web渗透利用msf反弹shell数据库信息web管理员密码提权 一、将靶机导入到虚拟机当中 靶机地址&#xff1a; https://www.vulnhub.com/entry/dc-1-1,29…

英伟达高性能芯片供货周期缩短到2-3个月,今年GPU不再紧缺?

戴尔台湾地区总经理Terence Liao近日称&#xff0c;英伟达高性能 AI GPU的交付周期在过去几个月中已从3-4个月缩短到仅2-3个月&#xff0c;进入2024年以来交货等待时间一直在不短缩短&#xff0c;目前的2-3个月已经是英伟达高性能GPU最短的交货期。 英伟达公司正在不断努力提高…

wsl下Linux使用chatglm.cpp记录

目录 前言 一些说明 过程 git chatglm.cpp代码 安装相关包 convert量化ggml cmake构建项目 命令行模型推理 webdemo模型推理 APIServer 性能表现 gpu推理设置 前言 Linux之前用的少&#xff0c;多数还是在Windows下操作&#xff0c;导致对Linux很陌生&#xff0c;…

MES系统中的业务过程管理流程

MES即制造执行系统&#xff0c;也可称为生产执行系统&#xff0c;是一套面向制造企业车间执行层的生产信息化管理系统。 mes系统的业务流程包括哪些方面呢&#xff1a; 一、生产计划与调度 mes系统中的生产计划与调度模块&#xff0c;能够根据企业生产实际情况&#xff0c;制…