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

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

news 2025/11/4 4:21:20

目录

  • 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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/11/2 13:12:18

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/11/3 20:04:18

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/10/28 17:51:39

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/8/6 22:35:04

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/10/16 13:08:30

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/1 22:49:39

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/11/2 22:10:34

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/11/3 23:14:22

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/10/24 14:40:23