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

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

news 2026/2/7 10:28:05

目录

  • 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

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2026/1/28 9:44:45

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23