大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off。
网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:首先从登录弹框中登陆成功,chrome会弹出是否保存密码的提示框,点击保存密码按钮后,就会出现表单自动填充的问题,如图,如果用户和密码都自动填充,那么在某些网站中将非常的不安全,如支付网站。
如何解决呢,一下提供几种方法
1、修改value值(目前已失效,随着chrome版本的升级,现今版本已不再能获取到value值了,所以无法对其进行操作,貌似chrome自动填充的表单的value值是存在 DocumentFragment里的div中的,暂不知道怎么去处理,等待大神告知)
if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
var inputers = document.getElementsByTagName("input");
for(var i=0;i<inputers.length;i++){
if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
inputers[i].value = " ";
}
}
setTimeout(function(){
for(var i=0;i<inputers.length;i++){
if(inputers[i].type !== "submit"){
inputers[i].value = "";
}
}
},100)
}
2、 修改disabled属性
if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
var inputers = document.getElementsByTagName("input");
for(var i=0;i<inputers.length;i++){
if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
inputers[i].disabled= true;
}
}
setTimeout(function(){
for(var i=0;i<inputers.length;i++){
if(inputers[i].type !== "submit"){
inputers[i].disabled= false;
}
}
},100)
}
3、 去除输入框的name和id属性
if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
var inputers = document.getElementsByTagName("input");
for(var i=0;i<inputers.length;i++){
if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
var input = inputers[i];
var inputName = inputers[i].name;
var inputid = inputers[i].id;
inputers[i].removeAttribute("name");
inputers[i].removeAttribute("id");
setTimeout(function(){
input.setAttribute("name",inputName);
input.setAttribute("id",inputid);
},1)
}
}
}
4、可以在不需要默认填写的input框中设置 autocomplete="new-password"
网上咱没有找到对其详细解释,但是发现163邮箱的登录注册是这么用的
5、修改readonly属性
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
有没有想过自己创建一个 Chrome 扩展应用?看完这篇文章你将会发现这是多么的简单。按照下面这些步骤,你将会很快地将你的想法实现为真实的应用,并在 Chrome Web Store 上发布。
自十年前 Chrome 浏览器首次推出后,速度已经成为 Chrome 的四个核心原则之一。我们一直都想让 Web 开发者能够向用户提供快速的、优秀的上网体验。在 Chrome 诞生十周年之际,我们认为回顾在这十年中为提高速度所付出的努力,以及我们接下来要进行的尝试将会是一件非常有趣的事情
很多扩展功能比较单一,直接用一张图就能很清楚说明它的用途啦。出于篇幅的限制,我在这里会重点介绍一些我个人比较用得上的一些扩展。因为平时前端开发的比较多,所以偏向前端程序员的扩展可能会比较多一些。
有时候,我们需要去研究人家网站的运行机制,这就免不了要在他们的前端脚本里插入一些调试代码看看运行效果。在chrome65以前,我们可以打开目标网页的 开发者工具
Chrome 114 默认启用了 CHIPS,这是 Google 通过新的 cookie 属性来淘汰第三方 Cookie 的一部分;Chrome 114 还默认启用了 Popover API,以便更轻松地实现弹框。Chrome 115 中的一些新功能也逐渐被揭晓
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!