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;
  }
}


0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。