当前位置： 首页 > news >正文

禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)

news 2025/12/19 14:45:16

目录

  • 1.要解决的问题
  • 2.一技能：原生属性，小试牛刀
  • 3.二技能：傀儡input，瞒天过海
  • 4.三技能：JavaScript出击，直接开大
  • 5.九九八十一难，永远还有最后一难

写在前面： 如有转载，务必注明出处，否则后果自负。

1.要解决的问题

最近工作上遇到一个客户反馈的问题，说是网页上的登录界面会出现自动填充账号和密码，这会导致系统不安全，账号泄露等风险。我寻思着ntm要是没有在浏览器上点击自动保存账号和密码它会自动填充吗？真是无语。本以为不需要修改，让他自己在浏览器上清除保存密码的记录即可，没办法，打工人作为牛马有求必应。

所以，我们要解决的就是，把浏览器对input的自动填充以及填充提示给Ban掉。如下图的三个区域。
由于不同的浏览器对于自动填充有着不同的策略，所以我们需要使出各种招式组合在一起才能把它消灭，在这里我主要使用谷歌、火狐、Edge(原IE)三大浏览器来对比查看效果，一起来看看吧！
在这里插入图片描述
简单写了一个Demo，来模拟表单登录：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input禁止自动填充</title><link rel="stylesheet" href="./index.css">
</head><body><form action="/"><input id="userName" type="text" placeholder="请输入账号" ><input id="userPwd" type="password" placeholder="请输入密码" ><button type="submit">提交</button></form>
</body></html>

/* index.css */
* {margin: 0;padding: 0;box-sizing: border-box;
}form {width: 300px;height: 200px;margin: 100px auto;
}input {width: 100%;height: 40px;padding: 0 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 5px;outline: none;
}button {width: 100%;height: 40px;border: 1px solid #ccc;border-radius: 5px;background-color: aquamarine;
}

在这里插入图片描述

2.一技能：原生属性，小试牛刀

给input 添加原生属性autocomplete：
对于text框，添加 autocomplete=“off”；
对于password框，添加 autocomplete=“new-password”。

<input id="userName" type="text" placeholder="请输入账号" autocomplete="off">
<input id="userPwd" type="password" placeholder="请输入密码" autocomplete="new-password">

谷歌浏览器：仅对 type=‘text’ 的input有效，即不能自动填充，也不会显示填充提示；而对于密码框 type=‘password’，虽然不会自动填充，但密码框聚焦后会出现填充提示，点击填充提示的账号密码，可以实现自动填充。如图所示：
在这里插入图片描述
火狐浏览器：输入框和密码框都不会出现自动填充，但二者聚焦后都会出现填充提示，并都能进行点击后填充。如图所示：
在这里插入图片描述
Edge浏览器： autocomplete对该浏览器完全无效。初始化页面即会自动填充账号和密码。
在这里插入图片描述

3.二技能：傀儡input，瞒天过海

给text框和password框前后各加一个假的input框，让浏览器的自动填充对假的input框生效，然后用css把假的input框设置为不可见，从而瞒天过海。

<form action="/"><input id="fakerUserName1" type="text" placeholder="请输入账号" autocomplete="off"><input id="userName" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserName2" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserPwd1" type="password" placeholder="请输入密码" autocomplete="new-password"><input id="userPwd" type="password" placeholder="请输入密码" autocomplete="new-password"><input id="fakerUserPwd2" type="password" placeholder="请输入密码" autocomplete="new-password"><button type="submit">提交</button>
</form>

/* css将假的input设置为不可见 */
input#fakerUserName1,
input#fakerUserName2,
input#fakerUserPwd1,
input#fakerUserPwd2 {position: fixed;top: -100%;left: -100%;
}

谷歌浏览器： 该技能对谷歌的效果与属性autocomplete的效果一样，故与技能一相比无任何变化。即text框既不能填充也无填充提示，password框不能填充但聚焦后有填充提示，并且点击后可自动填充。

火狐浏览器： 该技能对text框有效，既不能自动填充，也不会出现填充提示，对password无效，不能自动填充，但聚焦后有填充提示，点击后可自动填充。如图：
在这里插入图片描述
Edge浏览器： 解决了初始化页面即自动填充的问题，对于text框既不能自动填充，也不会出现填充提示，对于password框，不能自动填充，但聚焦后有填充提示，点击后可自动填充。如图：
在这里插入图片描述

注意： 添加假的input框时要注意给input的id也要加上，否则可能不起作用，因为不同的浏览器对此有不同的策略，有时，id的字符长短也会产生不同的效果，可自行尝试。

4.三技能：JavaScript出击，直接开大

通过前两个技能，可以发现，这些浏览器的策略是非常激进的，尤其是对于password框。有时无论你添加多少个假的input框，可能对于浏览器而言，它并不在乎，因为只要是 type=‘password’ 的input框，它就会在聚焦后出现填充提示，点击这个填充提示，就又可以实现自动填充。对于某些用户而言，可能由于不小心点击了在浏览器上自动的保存密码，但对于该功能，其账号的安全性便大大降低了，尤其对于某些注重隐私的公司而言，这可能是不可接受的，因为，商战是处处皆有可能的，于是乎，一口大黑锅就甩到了开发人员的身上。

既然如此，开发狗该怎么办呢？
既然技能一和技能二只对 type=‘text’ 的input框有效，那我就不要使用 type=‘password’ 了呗。

嗯！真是大聪明？！
如果这样的话，输入密码的时候不就直接明文输入了吗？
对啊…
滚…
等等，你说什么？
滚…
上一句，输入密码的时候？输入密码的时候？？输入密码 的时候 ！！！
OK，JavaScript出击！

于是乎，办法出现了，我们可以将 type=‘password’ 改为 type=‘text’ ，然后使用JavaScript监听input事件，实现偷梁换柱，功德圆满！哈哈哈哈哈…

<body><form action="/"><input id="fakerUserName1" type="text" placeholder="请输入账号" autocomplete="off"><input id="userName" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserName2" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserPwd1" type="text" placeholder="请输入密码" autocomplete="new-password"><input id="userPwd" type="text" placeholder="请输入密码" autocomplete="new-password"><input id="fakerUserPwd2" type="text" placeholder="请输入密码" autocomplete="new-password"><button type="submit">提交</button></form><script>document.querySelector('#userPwd').addEventListener('input', function () {this.type = 'password';})</script>
</body>

看看效果：

谷歌：
谷歌浏览器效果
火狐：
火狐浏览器效果
Edge：
Edge浏览器效果

5.九九八十一难，永远还有最后一难

根据网友反馈，当输入密码然后清空之后会出现自动填充的提示，我试了下，确实如此。而且谷歌和Edge出现这种情况之后还会影响type='text’的输入框也出现自动填充。

只能说浏览器对于自动填充的策略确实很激进啊，但凡出现password，它似乎就对这个input进行了跟踪，无论type再怎么变，它也会给你弹出自动填充。

这里的解决办法是使用账号脱敏的思想，坚决不使用password密码框，关于账号脱敏可以看看我的下一篇文章，文章地址在本文末尾。

具体思路就是使用text框输入密码，输入时用•代替明文显示，然后用一个辅助input记录真实密码，传递数据时就使用这个辅助input的值进行传递。

具体代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;padding: 50px 20px;margin: 100px auto;border-radius: 5px;background: #ccc;}input {width: 100%;height: 40px;padding: 0 10px;margin-bottom: 20px;outline: none;border: 1px solid #ccc;}input#realUserPwd {display: none;}button {width: 100%;height: 40px;cursor: pointer;outline: none;border: 1px solid #ccc;background-color: #fff;}</style>
</head><body><form class="container" action="/"><input type="text" id="userName" placeholder="请输入账号" autocomplete="off"><input type="text" id="userPwd" placeholder="请输入密码" autocomplete="off"><input type="text" id="realUserPwd" autocomplete="off"><button type="submit">提交</button></form><script>const inputField = document.querySelector('#userPwd');const realUserPwd = document.querySelector('#realUserPwd');inputField.addEventListener('input', function (e) {// 获取输入框中的值const inputValue = this.value.trim();// 拼接每一次输入的当前数字realUserPwd.value += inputValue.substring(inputValue.length - 1);// 防止用户删除上一个输入值时出现错误// 并且// 防止用户通过粘贴输入值时只监听到最后一位数而出现的错误if (inputValue.length != realUserPwd.value.length) {realUserPwd.value = inputValue;}// 将明文替换成•显示this.value = inputValue.substring(0, inputValue.length).replace(/./g, '•');console.log('res', this.value, this.value.length, realUserPwd.value, realUserPwd.value.length);})</script>
</body></html>

看看效果：
谷歌浏览器：
在这里插入图片描述
火狐浏览器：
在这里插入图片描述
Edge浏览器：
在这里插入图片描述
看起来已经解决了这个bug，并且代码也精简了很多，如果还有其他问题，欢迎交流！

后记：
对于浏览器版本的不同可能有些许差异，但问题不大。对于我使用的浏览器的版本，见下图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

SOS： 但与客户的战争还未结束，还是与input有关，也就是输入账号脱敏的问题，也就是实现下图的效果，切莫大意，我刚开始确实低估了它，不过最终也是如愿解决。

在这里插入图片描述

欲知后事如何，且听下回分解。

对input输入框脱敏的实现（input输入时可回删、可粘贴）可查看文章：https://blog.csdn.net/qq_51667621/article/details/139988001

相关文章：

禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)

目录 1.要解决的问题2.一技能&#xff1a;原生属性&#xff0c;小试牛刀3.二技能&#xff1a;傀儡input&#xff0c;瞒天过海4.三技能&#xff1a;JavaScript出击&#xff0c;直接开大5.九九八十一难&#xff0c;永远还有最后一难 写在前面&#xff1a; 如有转载&#xff0c;务…...

编程日记 2024/6/30 8:50:04

鸿蒙项目实战-月木学途：1.编写首页,包括搜索栏、轮播图、宫格

效果展示 搜索栏制作 相关知识回顾 输入框组件TextInput 单行输入框类型.type(InputType.Normal)//基本输入框.type(InputType.Password)//密码.type(InputType.Email)//邮箱.type(InputType.Number)//数字.type(InputType.PhoneNumber)//电话号.type(InputType.Normal).type…...

编程日记 2024/6/30 8:49:03

深入浅出：npm常用命令详解和实践

npm 是 Node.js 的包管理器&#xff0c;用于管理 Node.js 应用的依赖关系和版本。 以下是一些常用的 npm 命令&#xff1a; npm init: 命令用于初始化一个新的 Node.js 项目。它会创建一个 package.json 文件&#xff0c;这个文件包含了项目的元数据和依赖信息。 npm initnpm…...

编程日记 2024/6/30 8:48:02

山东大学-科技文献阅读与翻译（期末复习）（选择题+翻译）

目录 选择题 Chapter1 1.which of the following is not categorized as scientific literature 2.Which of the followings is defined as tertiary(三级文献) literature? 3.Which type of the following international conferences is listed as Number one conference…...

编程日记 2024/6/30 8:47:01

二分查找：自定义 upper_bound、lower_bound

二分查找详细介绍可以看这篇文章&#xff0c;此篇文章介绍返回索引的 upper_bound 和 lower_bound 的 C 实现。 lower_bound 实现代码 #include <vector>int lower_bound_index(const std::vector<int>& vec, const int& target) {int left 0;int right…...

编程日记 2024/6/30 8:43:58

Java 搭建个人博客基本框架

为了实现一个功能完善的个人博客系统&#xff0c;我们将使用Spring Boot作为框架&#xff0c;MySQL作为数据库&#xff0c;并引入Spring Security来处理用户认证和授权。以下是系统的详细设计和实现步骤&#xff1a; ## 项目结构 - src/main/java/com/blog - controller …...

编程日记 2024/6/30 8:41:56

停车场智能化管理：车位引导系统实现车位资源优化与数据分析

随着城市汽车保有量的不断增长&#xff0c;停车难问题日益凸显。尤其是在高峰时段&#xff0c;寻找停车位和取车成为了许多车主的头疼问题。为了解决这一难题&#xff0c;维小帮智能车位引导系统应运而生&#xff0c;它利用先进的技术手段&#xff0c;帮助车主快速找到停车位&a…...

编程日记 2024/6/30 8:40:55

梯度下降法

梯度下降法是一种在机器学习和深度学习中广泛使用的优化算法。它用于最小化某个函数&#xff0c;通常是损失函数或成本函数&#xff0c;通过迭代调整参数来找到函数的最小值点。梯度下降法的基本思想是从一个初始参数出发&#xff0c;沿着损失函数梯度&#xff08;导数&#xf…...

编程日记 2024/6/30 8:39:54

【高考志愿】光学工程

目录 一、专业概述 二、专业特点 三、研究和就业方向 3.1 研究方向 3.2 就业方向 四、光学工程专业排名 高考志愿选择光学工程专业无疑是一项既具深度又富挑战性的明智之举。这个古老而充满魅力的专业&#xff0c;正逐渐崭露其在现代社会中的重要性与独特魅力。 一、专业…...

编程日记 2024/6/30 8:38:53

Golang | Leetcode Golang题解之第205题同构字符串

题目&#xff1a; 题解&#xff1a; func isIsomorphic(s, t string) bool {s2t : map[byte]byte{}t2s : map[byte]byte{}for i : range s {x, y : s[i], t[i]if s2t[x] > 0 && s2t[x] ! y || t2s[y] > 0 && t2s[y] ! x {return false}s2t[x] yt2s[y] …...

编程日记 2024/6/30 8:35:50

【Unity】RPG2D龙城纷争（五）关卡编辑器之地图编辑

更新日期：2024年6月25日。 项目源码：本章发布 索引 简介关卡编辑器窗口类（LevelEditor）一、定义关卡编辑器窗口类二、两种编辑模式三、地块编辑模式1.关卡模板2.打开编辑窗口3.编辑器基本属性4.地块模板5.重新生成地图6.地图刷子7.刷地块源码链接简介 关卡编辑器将是我们配…...

编程日记 2024/6/30 8:34:49

音视频入门基础：H.264专题（4）——NALU Header：forbidden_zero_bit、nal_ref_idc、nal_unit_type简介

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…...

编程日记 2024/6/30 8:33:48

基于深度学习的人脸关键点检测

1. 任务和目标 人脸关键点检测的主要任务是识别并定位人脸图像中的特定关键点&#xff0c;例如眼睛的角点、眉毛的顶点、鼻子的底端、嘴角等。这些关键点不仅能提供面部结构的几何信息&#xff0c;还可以用于分析表情、识别个体&#xff0c;甚至检测面部姿势。 2. 技术和方法…...

编程日记 2024/6/30 8:32:47

C++自定义智能指针

template <class T> class counted_ptr;// 智能指针引用计数类 template <class T> class Ref_Ptr {friend class counted_ptr<T>; private:T* m_pTtr; // 实际的指针size_t counted_ptr; // 引用计数Ref_Ptr(T* p);virtual ~Ref_Ptr(); };template <clas…...

编程日记 2024/6/30 8:31:46

一个合理的前端应用文件结构

在大型应用中&#xff0c;最关键且最具挑战性的方面之一就是拥有一个良好且合理的文件结构。在考虑通过微前端将代码库拆分成多个应用之前&#xff0c;可以遵循一些步骤来改善项目级别的架构&#xff0c;并在您考虑这一路径时使过渡更容易。 我们的目标是应用某种模块化方法&am…...

编程日记 2024/6/30 8:30:45

spring和springboot的关系是什么？

大家好&#xff0c;我是网创有方的站长&#xff0c;今天给大家分享下spring和springboot的关系是什么&#xff1f; Spring和Spring Boot之间的关系可以归纳为以下几个方面&#xff1a; 技术基础和核心特性&#xff1a; Spring&#xff1a;是一个广泛应用的开源Java框架&#…...

编程日记 2024/6/30 8:28:43

智慧校园-医务管理系统总体概述

智慧校园医务管理系统&#xff0c;作为校园健康管理体系的智能化升级&#xff0c;深度融合信息技术与医疗服务&#xff0c;为师生构筑起一道全方位的健康守护网。医务管理系统以提升校园医疗服务水平、优化健康管理流程为核心目标&#xff0c;通过一系列创新功能&#xff0c;确…...

编程日记 2024/6/30 8:26:41

AUTOSAR汽车电子嵌入式编程精讲300篇-智能网联汽车CAN总线-基于电压信号的CAN总线入侵检测系统设计与实现

目录 前言 入侵检测系统研究现状 入侵检测系统建模 CAN总线 入侵检测威胁模型 Deep SVDD模型 入侵检测系统方案设计 挑战和解决方案 差分信号的采集与处理 差分信号的特征提取 入侵检测模型的设计 入侵检测系统性能评估 实验环境设置 不同的车辆状态 不同数量的…...

编程日记 2024/6/30 8:25:40

BLACKBOX.AI：解锁编程学习新纪元，加速开发的AI得力助手

文章目录 &#x1f4af;BLACKBOX.AI 官网&#x1f341;1 BLACKBOX.AI 工具使用教程&#x1f341;2 BLACKBOX.AI工具使用界面介绍&#x1f341;3 Chat(聊天)功能&#x1f341;4 Explore (探索)功能&#x1f48e;4.1 Terminal(终端)功能&#x1f48e;4.2 Discover(发现)功能&…...

编程日记 2024/6/30 8:24:39

实验三 时序逻辑电路实验

仿真 链接&#xff1a;https://pan.baidu.com/s/1z9KFQANyNF5PvUPPYFQ9Ow 提取码&#xff1a;e3md 一、实验目的 1、通过实验&#xff0c;理解触发的概念&#xff0c;理解JK、D等常见触发器的功能&#xff1b; 2、通过实验&#xff0c;加深集成计数器功能的理解&#xff0c;掌…...

编程日记 2024/6/30 8:23:38

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/11/30 16:55:15

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/12/14 12:44:16

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/10/23 23:35:01

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/12/5 8:12:50

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...

编程新知 2025/12/19 9:39:18

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...

编程新知 2025/12/14 5:15:02

深入理解 React 样式方案

React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...

编程新知 2025/11/1 6:38:03