在表单填写时突然发现autocomplete 失效了

网上搜索后得出大概意思是在某些情况下确实无效【捂脸】

解决方案

大致原因是浏览器默认为type为password的input标签自动填充密码

这样可以根据type来控制自动填充的出现,方案如下

<input id="oldPassword" type="text" onfocus="$(this).attr('type','text');" onblur="$(this).attr('type','password');">

但是缺点同样存在,得到焦点后密码就会完全显示出来

这时想到能否用css控制内容,方案如下

<input id="oldPassword" type="text" style="-webkit-text-security: disc !important;" >

这样就完美了,不受任何影响

补充css知识 Webkit 文字和背景效果

-webkit-background-clip:padding-box | border-box | content-box | text,指定对象的背景图像向外裁剪的区域。对应的脚本特性为backgroundClip

padding-box

从padding区域(不含padding)开始向外裁剪背景。

border-box

从border区域(不含border)开始向外裁剪背景。

content-box

从content区域开始向外裁剪背景。

text

从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩或实现文字渐变的效果。

 

示例:

div{ font-size:40px; width:500px; margin:30px auto; text-align:center; border:5px solid #999; padding:10px;}
.bgTest{background:-webkit-linear-gradient(top,#F00,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
<div class="bgTest">
背景测试 Background Test
</div>

结果:Text

padding-box和border-box(不知为何两者感觉没区别)

content-box

-webkit-background-origin: padding-box | border-box | content-box

设置或检索对象的背景图像计算background-position时的参考原点(位置)。对应的脚本特性为backgroundOrigin

padding-box 从padding区域(含padding)开始显示背景图像。
border-box 从border区域(含border)开始显示背景图像。
content-box 从content区域开始显示背景图像。

示例:http://ued.ctrip.com/blog/wp-content/webkitcss/demo/background-origin.html

background-position:设置背景图像的起始位置,详细http://www.w3school.com.cn/cssref/pr_background-position.asp

-webkit-background-size:设置对象的背景图像的尺寸大小。该属性提供2个参数值(特性值cover和contain除外)。如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。对应的脚本特性为backgroundSize

<length> 用长度值指定背景图像大小。不允许负值。
<percentage> 用百分比指定背景图像大小。不允许负值。
auto 背景图像的真实大小。
cover 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

示例:http://ued.ctrip.com/blog/wp-content/webkitcss/demo/background-size.html

文字相关:

-webkit-rtl-ordering:logical | visual

logical 默认。
visual 文本从右到左是倒序着编码,所以整个文本行可以从左到右呈现。

-webkit-text-fill-color:设置对象中的文字填充颜色。若同时设置text-fill-color和color,text-fill-color定义的颜色将覆盖color属性;通过text-fill-color属性,可以做出一些例如渐变文字和镂空文字的效果

-webkit-text-security:指定要使用的形状来代替文字的显示。

none 无。
circle 圆圈。
disc 圆形。
square 正方形。

-webkit-text-stroke :[ text-stroke-width ] | [ text-stroke-color ]。复合属性。设置或检索对象中的文字的描边。

-webkit-writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

horizontal-tb 水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)
vertical-rl 垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)
vertical-lr 垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb 左-右,上-下。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)
tb-rl 上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的(IE)
-webkit-marquee:<direction> <increment> <repetition> <style> <speed>,定义展示内容的属性
<direction> 文字滚动的方向
<increment> 每次移动的距离
<repetition> 文字滚动的重复次数
<style> 文字滚动的方式
<speed> 滚动或滑动的速度
各属性取值:

【扩充知识---原文连接】

Chrome 浏览器 autocomplete off无效的更多相关文章

  1. chrome浏览器font-size<12px无效解决办法

    当样式设定font-size<12px时,chrome浏览器里字体显示仍为12px:如font-size:11px; 但是chrome还是12px的大小,很不听话. 今天我就遇到了这样的问题?网 ...

  2. Chrome浏览器断点调试无效的问题

    问题是这样的,在使用chrome浏览器调试JavaScript的时候,突然设置的断点失效了,怎么弄都没有效果. 折腾了半天,尝试了各种方法就是没有用. 解决:重启一下chrome浏览器就好了,这似乎是 ...

  3. 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

    今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...

  4. Chrome浏览器字体设置低于12px无效

    在Chrome 在IE11                 本来以为是padding问题导致出现左右两边的底部不在同一直线(在IE上),在Chrome显示是正常的,查了一下,IE11和Chrome都是 ...

  5. Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

    今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...

  6. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  7. Chrome浏览器中autocomplete="off"不起作用解决方案

    多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录. 如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocompl ...

  8. Extjs 疑难杂症 (LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏)

    一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...

  9. django xadmin中logout页面在chrome浏览器中点击关闭页面无效

    问题现象 django xadmin中logout页面在chrome浏览器中点击关闭页面无效,无法关闭相应的页面 问题原因 高版本的chrome等浏览器不支持在window.colse()的写法 问题 ...

随机推荐

  1. ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction 表被锁的解决办法

    转自:https://blog.csdn.net/mchdba/article/details/38313881 前言:朋友咨询我说执行简单的update语句失效,症状如下:mysql> upd ...

  2. asp.net MVC4 @Html.DropDownList的使用

    在MVC4中使用Razor语法,一使用就爱上他了, 一般项目都是有一些增删改查功能,表单下拉框是经常使用的,除了用原始的<select>外,还可以用@Html.DropDownList和@ ...

  3. xsy1436-括号游戏

    题目 递归定义括号序列: 空串是括号序列 (A)是一个括号序列,其中A为括号序列 AB是一个括号序列,其中A,B均为括号序列 定义严格括号序列为形如(A)的括号序列,其中A为括号序列. 给出一个长度为 ...

  4. vijos1859[TJOI2014]电源插排

    题意:小 M 的实验室有很多电源插排.这些插排的编号从 1 到 N,由左向右排成一排.每天早晨,这些插排都是没有被使用的.每当一个学生来到实验室,他就将自己的笔记本电源插到某一个未被使用的插排上.实验 ...

  5. 【bzoj1143】[CTSC2008]祭祀river Floyd+网络流最小割

    题目描述 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河 ...

  6. Redis 基础:Redis 简介及安装

    Remote Dictionary Server(Redis)是一个由Salvatore Sanfilippo写的key-value存储系统.Redis是一个开源的使用ANSI C语言编写.遵守BSD ...

  7. prototype的本质

    在<关于思维方式的思绪>那篇文章里提到了, 原型的本质就是一种委托关系. 即我这里没有,就到我的原型里去看看,一旦找到就当成我的用. 本文详细说一下这个事情. 比如某女买东西,钱都是她老公 ...

  8. 【刷题】BZOJ 3527 [Zjoi2014]力

    Description 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. Input 第一行一个整数n. 接下来n行每行输入一个数,第i行表示qi. n≤100000,0<qi ...

  9. UVA.11384 Help is needed for Dexter (思维题)

    UVA.11384 Help is needed for Dexter (思维题) 题意分析 同样水题一道,这回思路对了. 给出数字n,面对一个1,2,3,4--n的数字序列,你可以对他们的部分或者全 ...

  10. 用ByteArrayOutputStream解决IO流乱码问题

    IO中用ByteArrayOutputStream解决乱码问题 --另一种解决乱码的方法 IO中另外一种防止乱码的方法:使用ByteArrayOutputStream在创建ByteArrayOutpu ...