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

您的电子邮箱地址不会被公开。 必填项已用 * 标注