在两个输入中显示/隐藏密码

debugcn 发表于 Dev

基拉西里斯

我试图构建一个表单，用户可以在其中更改两个密码输入的值，一个用于密码，另一个用于验证密码。

因此，为了让用户知道他键入的内容并确保他/她的密码彼此匹配，并尝试实现一种方法，在该方法中他只需选中一个复选框即可显示他的密码。

当前的 javascript 方法仅适用于一种输入，但我希望它适用于两种输入，而不仅仅是一种。我还想显示两个输入的密码，而不必检查它们自己对应的复选框（例如，如果选中一个复选框，它应该在两个输入中都显示文本）。

这是我目前拥有的 javascript 方法：

// First Code //
function addEvent (el, event, callback) {
  if ('addEventListener' in el) {                  
    el.addEventListener(event, callback, false);   
  } else {                                         
    el['e' + event + callback] = callback;         
    el[event + callback] = function () {
      el['e' + event + callback](window.event);
    };
    el.attachEvent('on' + event, el[event + callback]);
  }
}


function removeEvent(el, event, callback) {
  if ('removeEventListener' in el) {                      
    el.removeEventListener(event, callback, false);      
  } else {                                               
    el.detachEvent('on' + event, el[event + callback]);  
    el[event + callback] = null;
    el['e' + event + callback] = null;
  }
}


// Second Code //
(function() {

  var pwd = document.getElementById('password');
  var chk = document.getElementById('showpass'); 

  addEvent(chk, 'change', function(e) {       
    var target = e.target || e.srcElement;   
    try {                                     
      if (target.checked) {                  
        password.type = 'text';              
      } else {                               
        password.type = 'password';          
      }
    } catch(error) {                            
      alert('This browser cannot switch type'); 
    }
  });

}());

<!-- First Password -->
<div class="form-group">
  <label for="password">Password</label>
  <div class="input-group date">
    <div class="input-group-addon">
      <i class="fa fa-lock" aria-hidden="true"></i>
    </div>
    <input type="password" name="password" value="" id="password" class="form-control">
    <div class="input-group-addon"><input type="checkbox" id="showpass"></div>
  </div>
</div>

<!-- Second Password -->
<div class="form-group">
  <label for="password2">Confirm Password</label>
  <div class="input-group date">
    <div class="input-group-addon">
      <i class="fa fa-lock" aria-hidden="true"></i>
    </div>
    <input type="password" name="password2" value="" id="password2" class="form-control">
    <div class="input-group-addon"><input type="checkbox" id="showpass"></div>
  </div>
</div>

提前致谢。

姆彼得罗夫

一次更改两个输入的类型：

var pwd = document.getElementById('password');
var confirm = document.getElementById('password2');

...

if (target.checked) {                  
    pwd.type = 'text';              
    confirm.type = 'text';              
} else {                               
    pwd.type = 'password';         
    confirm.type = 'password';              
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。