INPUT 输入框表单显示密码字符

概览

表单密码框一般可以通过控制 input 的 type 来显示或隐藏密码字符，当 type="password" 时隐藏字符为星号，当 type="text" 时显示密码为字符。

由此可以使用 JS 来控制 input 的 type 实现这个需求，并加以 CSS 来设计界面要素。

JS

var CpsOfPassword = document.getElementById('CpsOfPassword');
var imgs = document.getElementById('showPsw');
var flag = 0;
imgs.onclick = function () {
  if (flag == 0) {
    CpsOfPassword.type = 'text';
    showPsw.src = 'https://static.hexingxing.cn/v2/element/webp/showPsw.png';//show
    flag = 1;
  } else {
    CpsOfPassword.type = 'password';
    showPsw.src = 'https://static.hexingxing.cn/v2/element/webp/hidePsw.png';//hide
    flag = 0;
  }
}

HTML

<div class="relative">
    <input type="password" id="CpsOfPassword" name="" class="inputControl" required="required">
  <div class="absolute">
    <img src="https://static.hexingxing.cn/v2/element/webp/hidePsw.png" id="showPsw" class="showPsw">
  </div>
</div>

CSS

div.relative {/*父元素 div；*/
    position: relative;
    margin: 80px auto;
    width: 200px;
    padding: 0 5px;
} 

div.absolute {/*子元素 div；*/
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  margin: 12px auto;
}

input.inputControl{
  height: 36px;
  width: 100%;
}

img.showPsw{
  width: 18px;
}

调试

https://static.hexingxing.cn/v3/form/input/password/showpwd/