关于input type设置password出现黄色背景和默认内容

只要设置了type为password就会出现黄色的背景和默认的内容。

点击password框会出现使用以下项的密码,

有没有觉得很丑，这是谷歌浏览器默认的行为，

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow:0 0 0 60px white  inset;
  -webkit-text-fill-color: #878787;
}

在css样式里加上这个就可以kill掉黄色便渍了（(⊙o⊙)…）

然后是第二种诡异的样式，试了好几种方法：

第一种：在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"（这个我没成功，你可以试试）

第二种：

在初始化构建整个页面结构的时候不要出现 <input type="password" /> 元素，可以使用 <input type="text" /> 元素代替。然后为 type="text" 元素增加 onfocus 事件，当事件触发后：
动态把 <input type="text" /> 修改为 <input type="password" />

onFocus={(e) => this.handleChange('oldPassword', e)}

onChange={(e) => this.handleChange('oldPassword', e)}

handleChange(key, e) {
    if (e.target.value === '') {
        e.target.type = 'text'
    } else{
        e.target.type = 'password';
    }
}

这样子就能保证不会出现“自动填充”和“使用以下项密码”的问题

还有两种方法，只提供思路啊：

1， 两个text输入框，一个作为用户输入的，一个隐藏。输入的把value替换为圆点，隐藏框保持真正的输入值。发送隐藏框的值到后端。

2，type设置为text，然后用伪元素给它盖住，小点点自己根据value的长度设置

这里要注意onchange 事件和keyup事件Backspace键也会生成小点点，它的的ASCII值是8，可以控制一下