js解决chrome自动填写表单后input出现黄色背景的解决方案

这是一个让我困扰了很久问题。在chrome中,如果设置了自动完成表单,那么用户在输入了表单并且再次进入到表单页面时,会发现表单下面有一个黄色的背景。例如下面这样:

在chrome中自动完成表单后input出现黄色背景的解决方案 - 瘦猴子 - @从前有个T

 

在网上找了很久以后,终于在这篇文章里面找到了完美解决方法:

http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

 

对于纯色背景的表单,只需要在CSS里面加入类似下面的代码即可:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

例如白色背景的表单,就定义input的:-webkit-autofill 属性,设置一个白色的内阴影,这样就可以覆盖掉原来的黄色背景。

对于拿图片做背景的表单,就略复杂一点,要用js来解决,在js中加入如下代码:

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
 $(window).load(function(){
  $('input:-webkit-autofill').each(function(){
   var text = $(this).val();
   var name = $(this).attr('name');
   $(this).after(this.outerHTML).remove();
   $('input[name=' + name + ']').val(text);
  });
 });
}

然后进行测试,问题完美解决~~

在chrome中自动完成表单后input出现黄色背景的解决方案 - 瘦猴子 - @从前有个T
posted @ 2013-03-30 17:15  dtdxrk  阅读(650)  评论(0编辑  收藏  举报