javascript - 实现密码切换功能

Question

<分区>

Answer 1

一旦 input 可靠地跨浏览器创建，您就不能更改它的 type。 更新: 这可能只是 IE8 及之前的问题。如果您不需要支持这些，只需确保在目标浏览器上进行测试即可。

相反，您必须创建一个新的 input，复制 value 和其他一些东西，然后替换原来的。

大致:

function togglePass(){
    var newpwd = document.createElement("input");
    newpwd.type = pwd.type == 'password' ? 'text': 'password';
    newpwd.value = pwd.value;
    newpwd.className = pwd.className;
    newpwd.id = pwd.id;
    newpwd.required = pwd.required;
    newpwd.autocomplete = pwd.autocomplete;
    pwd.parentNode.insertBefore(newpwd, pwd);
    pwd.parentNode.removeChild(pwd);
    pwd = newpwd;
    eye.classList.toggle('active');
}

var pwd = document.getElementById('pwd');
var eye = document.getElementById('eye');
eye.addEventListener('click', togglePass);

function togglePass(){
    var newpwd = document.createElement("input");
    newpwd.type = pwd.type == 'password' ? 'text': 'password';
    newpwd.value = pwd.value;
    newpwd.className = pwd.className;
    newpwd.id = pwd.id;
    newpwd.required = pwd.required;
    newpwd.autocomplete = pwd.autocomplete;
    pwd.parentNode.insertBefore(newpwd, pwd);
    pwd.parentNode.removeChild(pwd);
    pwd = newpwd;
    eye.classList.toggle('active');
}

.fa {
  position: absolute;
  left: 350px;
  top: 10px;
  font-size: 25px;
  cursor: pointer;
  color: #999;
}

.fa.active {
  color: #0000FF;
}

<i class="fa fa-eye" id="eye">eye</i>
<input id="pwd" name="password" type="password" class="form-control" required autocomplete="off">
<div>x</div>