chrome输入框input黄色背景去除 及 autocomplete失效解决方法

1、写在前面

在写一个登陆页面的时候，打算把表单里input标签的自动完成功能关闭，于是把帐号和密码框的autocomplete属性设置为off。由于之前登陆选择了记住密码，每次在chrome和firefox打开或者刷新页面的时候都把帐号和密码给自动完成了。
于是乎与需求有误差，所以随便处理了下，但是最近劳烦，决定和这问题杠上了。
以下是各种测试、各种结论、各种扯淡……

呵呵

随着chrome版本的升级，有的chrome支持重写input:-webkit-autofill原有的属性，有的不支持重写。另外js也无法获取到chrome自动填充的表单的value值，所以网上盛传的使用jquery解决的方法也是不凑效，最多也就只能去掉黄色背景，而自动填充的value却被移除了。

所以各种那value值的判断出问题了。
废话多了，来点料才是实在（已经试过n多方法，只贴有效地，在版本46-48下测试）：

2、关闭自动填充

原理：chrome和firefox的表单自动完成是以password类型的input标签为识别条件来构建记住密码这个功能的，那么在输出页面的时候完全可以把这个密码框的type设置为text，然后在用户点击密码框输密码时把这个密码框的type再变回password

<input type="text" onfocus="this.type='password'" class="" name="loginPwd">

3、去掉黄色背景

CSS：

<style type="text/css">
    input:-webkit-autofill {
         -webkit-box-shadow: 0 0 0px 1000px white inset;
       }
</style>

4、自定义placeholder效果时显示重叠处理

自动填充的password的输入不触发change事件，
所以去掉placeholder的代码也无效；
再没有页面任何操作（鼠标点击任何地方）前，也拿不到value；

效果及代码：


html：

<form action="">
    <ul class="ul">
        <li class="li">
            <div class="ipt_box ipt_long nick_name phfl">
                <i class="ico"></i>
                <label class="placeHolder">请输入账号</label>
                <input type="text" class="" name="loginName">
            </div>
            <div class="error"><i class="ico"></i>手机或邮箱格式不正确</div>
        </li>
        <li class="li">
            <div class="ipt_box ipt_long pwd phfl">
                <i class="ico"></i>
                <label class="placeHolder">请输入密码</label>
                <input type="password" class="" name="loginPwd">
            </div>
            <div class="error"><i class="ico"></i>密码长度6~16位</div>
        </li>
    </ul>
    <div class="operate">
        <span onclick="javascript:G.login.doLoginStep1();" class="btn">登录</span>
    </div>
</form>

处理方式：判断用户名被自动填充的话，将密码框的placeholder也去掉。

<script type="text/javascript">
$(function(){
    $(".phfl input").eq(0).change(function (){
        var _t = $(this);
        if(_t.val() != "")
            $(".login_div .placeHolder").hide();
        }
    }).change();
})
</script>

这么作弊会不会被骂啊？管不了那么多了，切合自己的需求来处理好才是王道。下面贴上用setTimeout处理的方法，不过延迟执行的时间比较坑：小了没效果，大了重叠层出现一段时间后才显示正常……所以我用了20（一闪而过，还记的那个词吧（你伤害了我，却一笑而过））

<script type="text/javascript">
$(function(){
    setTimeout(function(){
        var _t = $(".phfl input").eq(0);
        if(_t.val() != ""){
            $(".login_div .placeHolder").hide();
        }
       }, 20);
})
</script>

至此，你也看得够多的了，自己玩玩吧。

---

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。