INPUT 输入框表单设计显示/隐藏密码选项

Form

实现表单内容和显示/隐藏密码样式；

<input type="password" id="CpsOfPassword" name="AccountPassword" class="formControl" >
<label><img src="./v2/element/webp/hidePsw.png" id="showPsw"></label>

CSS

设计显示/隐藏密码元素的相对位置，相对于密码输入框而定位；

#showPsw {
    width: 18px;
    position: relative;
    top: 5px;
    right: 30px;
}

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 = './v2/element/webp/showPsw.png';//show
    flag = 1;
  } else {
    CpsOfPassword.type = 'password';
    showPsw.src = './v2/element/webp/hidePsw.png';//hide
    flag = 0;
  }
}