时间戳

首页 > 解决方案 > 实现密码切换功能

javascript - 实现密码切换功能

问题描述

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

function togglePass() {
  eye.classList.toggle('active');
  (pwd.type == 'password') ? pwd.type == 'text': pwd.type == 'password';
}
.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"></i>
<input id="pwd" name="password" type="password" class="form-control" required autocomplete="off">

直到classList它工作的切换部分 - 它将图标变为蓝色。但是，它不适用于将密码类型更改为文本的部分。

标签： javascripthtmlcss

解决方案

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

相反，您必须创建一个新的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>

推荐阅读