首先上设计图，需要实现的效果：
填写密码之前：
填写密码之后：
问题：需求是非常简单的，但是问题出在谷歌浏览器自动填充密码的情况下，不知道是因为什么机制，谷歌浏览器自动填充上的密码在js中获取不到内容，所以无法触发自动填充上内容的时候文字移动至上方，在表面看来，在页面初始化的时候，还没有填充上值，但是js又无法捕捉到是何时填充上的这个值，所以没办法触发js使文字上移，就会造成页面如下
解决方案：并不是所有版本的谷歌都是打开页面以后自动填充密码的，多数版本是点击密码以后才填充上去，只需要解决自动填充的情况即可，找了许多办法，都没有解决问题，后来发现，谷歌自动填充密码的时候给input添加了一个伪类：input:-webkit-autofill；进而想到，只要是这个存在，那么说明已经自动填充上了密码，就可以进行操作使文字上移，但是网上找了很多办法都无法去监控填充密码的时候，后来也是用了一个比较笨的办法来实现，判断浏览器是否是谷歌，如果是谷歌浏览器的话，使用了一个定时器，每个一段时间执行一次(我这里设置的是100ms一次)，看这个包含这个伪类的元素是否是存在，一旦找到了，就执行js使文字上移，并且销毁定时器，但是并不是所有版本的谷歌浏览器都是自动填充密码的，这样的话不能一直去执行这个定时器，密码填充虽然我们不确定填充的具体时机，但是无疑是很快的，所以可以设定一个时间，比如1500ms以后还找不到这个元素就代表这个版本的浏览器不会自动填充密码了，就也销毁这个定时器，比较取巧也比较笨，不过也算实现了想要的效果，有别的方法或者优化欢迎分享
代码如下：
// 如果是谷歌浏览器
if (navigator.userAgent.indexOf("Chrome") > -1) {
var num = 0;
function count() {
num++;
if ($("input:-webkit-autofill").length > 0 || num === 15) {
$("input:-webkit-autofill").prev().addClass("top");
clearInterval(cout);
return;
}
}
var cout = setInterval(count, 100);
}
备注：在网上看到了一种方法，是这样，检测Chrome对自动填充的字段进行的背景颜色更改。Chrome将自动填充字段的背景设为黄色，即使该值不存在，此更改也始终对Javascript可见。在Javascript中检测到这一点可以让我们知道该字段已自动填充了一个值，即使我们在Javascript中将该值视为空白也是如此。理论上来说可行，但不知道为什么我没有检测到，而且这也是需要时一个动态的检测，才能够知道是什么时候发生了变化，而且我发现有一些版本的浏览器是蓝色，所以谁知道到底有几种颜色要检测呢...万一还有粉色，岂不就尴尬了...
