autocomplete 属性本质
autocomplete 并非html5专属属性,它从HTML4时代就已存在。其作用是指示浏览器是否可自动填充表单字段,取值 on(默认)或 off。
Chrome的特殊逻辑
当检测到密码字段时,Chrome会主动忽略开发者的 autocomplete="off" 设置,这是其安全策略的一部分。此行为在Chrome 83版本后愈发严格。
<input type="password" autocomplete="new-password">
原理:
Chrome将此标识视为新密码字段,不会自动填充历史密码。实测支持Chrome 110+版本。
// 页面加载时执行
document.querySelectorAll('input[autocomplete="off"]').forEach(input => {
const id = input.id, name = input.name;
input.removeAttribute("id");
input.removeAttribute("name");
setTimeout(() => {
if(id) input.id = id;
if(name) input.name = name;
}, 100);
});
注意:需确保表单提交前属性已恢复。
<input type="text" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
优势:
完全避免初始填充,聚焦后可正常输入。
// 仅针对非密码字段
const inputs = document.querySelectorAll('input:not([type="password"])');
inputs.forEach(input => input.disabled = true);
setTimeout(() => {
inputs.forEach(input => input.disabled = false);
}, 500);
风险提示:可能影响SPA框架的渲染逻辑。
*Chrome 92+ 已禁止脚本操作自动填充的值,此方案不再有效*
支付场景特殊处理
在支付密码框添加额外防护:
<input type="password" autocomplete="new-password" name="payment-pwd" readonly onfocus="this.removeAttribute('readonly')">
react/vue框架适配
使用useEffect或mounted生命周期执行方案2的逻辑:
// React示例
useEffect(() => {
const input = document.getElementById('secure-input');
const origName = input.getAttribute('name');
input.removeAttribute('name');
setTimeout(() => {
input.setAttribute('name', origName);
}, 100);
}, []);
避免用户体验冲突
Chrome的自动填充机制依赖三个条件:
上述方案通过破坏其中任一条件来阻止自动填充,且不干扰用户手动操作。
方案 | Chrome 125 | Firefox 120 | Safari 17 |
---|---|---|---|
new-password | ✅有效 | ✅有效 | ✅有效 |
移除ID/Name | ✅有效 | ⚠️部分有效 | ✅有效 |
只读初始化 | ✅有效 | ✅有效 | ✅有效 |
开发者应定期测试主流浏览器更新,谷歌每年都会调整密码管理策略。当发现方案失效时,检查浏览器控制台是否有相关警告是首要调试步骤。
您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。
浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。
IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:
由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。
浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染
Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器。目前,终端客户端比浏览器客户端更先进。终端客户端即时更新和交付,以便于体验新的功能,例如,你可以观看视频。
一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。
主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。
有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程
浏览器的事件循环,前端再熟悉不过了,每天都会接触的东西。但我以前一直都是死记硬背:事件任务队列分为macrotask和microtask,浏览器先从macrotask取出一个任务执行,再执行microtask内的所有任务,接着又去macrotask取出一个任务执行
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!