密码输入框的自动填充和系统提示关闭实例页面

回到相关文章 »

效果:

账号:

密码:

代码:

CSS代码:
.cover {
    position: absolute;
    -webkit-text-fill-color: transparent;
    border-color: transparent;
    background: none;
}
.cover,
.cover ~ input {
    font-family: Consolas, "Andale Mono", "Lucida Console", Monaco, "Courier New", monospace;    
}
HTML代码:
<form>
    <p>账号:<input name="email" placeholder="手机号或邮箱" autocomplete="off"></p>
    密码:<input class="cover"><input type="password" name="new-password" readonly onFocus="this.removeAttribute('readonly')">
</form>
JS代码:
var cover = document.querySelector('.cover');
var password = document.querySelector('[type="password"]');
cover.oninput = function () {
    password.value = this.value;
};
password.value = cover.value;