chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式


Posted in Javascript onOctober 09, 2015

一、发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来。

这个原因是我草率的直接设置在input元素里面,结果问题就来了。所以如果把这个图标放在input表单外面,就不会出现这个问题。

二、表单自动填充会添加浏览器默认样式怎么处理和避免

第二张图,就是表单自动填充后,chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

看到这里添加上这段代码,我会想到使用样式覆盖的方法解决。我完全可以使用!important去提升优先级。但是有个问题,加!important不能覆盖原有的背景、字体颜色,除了chrome默认定义background-color,background-images,color不能使用

!important提升优先级,其他属性均可使用它来提升优先级。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

思路有两个,1、通过打补丁,修复bug。2、关闭浏览器自带填充表单功能

情景一:input文本框是纯色背景的

解决办法:

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

情景二:input文本框是使用图片背景的

解决办法:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

先判断是否是chrome,如果是,则遍历input:-webkit-autofill元素,再通过取值,附加,移除等操作来实现。 这个方法没效果!!

所以最后我是不使用图标作为input表单的背景图片,而是多写一个标签,把图标拿到表单外面来。

思路二: 关闭浏览器自带填充表单功能

设置表单属性 autocomplete="off/on" 关闭自动填充表单,自己实现记住密码

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

如图:未自动填充前,此时这个邮箱的小图标是inpu表单的背景图片

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

如图:填充后,邮箱小图标被浏览器默认样式覆盖掉

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

最后,

如果不想多去处理chrome浏览器下表单自动填充出现的添加默认样式,那就把这个小小的图标放到表单外面吧,我这个因为是input框

只有border-bottom,如果这个input框有边框,那么可能需要使用一个div的边框的来假装成input框的边框,然后input框弄成是没有边框的。

像这样的input框

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

通过以上方法成功帮朋友解决浏览器自动添加默认样式问题,小伙伴们可以放心参考此文。

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
document.getElementById介绍
Sep 13 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
jQuery实现连续动画效果实例分析
Oct 09 #Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP函数extension_loaded()用法实例
2015/01/19 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jquery 使用简明教程
2014/03/05 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python设计模式之代理模式简单示例
2018/01/09 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python删除某个目录文件夹的方法
2020/05/26 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
运动会广播稿50字
2014/01/26 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
微信营销策划方案
2014/02/24 职场文书
质量月活动总结
2014/08/26 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
助学感谢信范文
2015/01/21 职场文书
绵山导游词
2015/02/05 职场文书
导游词之无锡梅园
2019/11/28 职场文书