将遮罩/取消遮罩按钮放置在密码输入元素中

Question

在此处输入图片说明

我想将切换隐藏/显示的“睁眼”启动程序图标添加到我的输入字段。 我已经知道使用JavaScript可以做到这一点。 我只想如何将眼睛图像添加到输入字段中。

从W3学校找到此html代码-眼睛图标https://www.w3schools.com/icons/tryit.asp?filename=trybs_ref_glyph_eye-open

Answer 1

这就是您真正想要的，在输入字段内有一个复选框

复选框在“更改”事件上切换密码屏蔽

 document.querySelector('.toggleMask').addEventListener('change', onToggleMaskChange); function onToggleMaskChange(){ this.nextElementSibling.type = this.checked ? 'text' : 'password' } 

 .form-group{ position: relative; width: 50%; /* <-- just for demo */ overflow:hidden; } .form-group > .toggleMask{ position: absolute; top: 0; right: -20px; text-indent: -30px; height:100%; line-height: 2; pointer-events: auto; z-index: 5; cursor: pointer; } .form-group > .toggleMask ~ input{ padding-right: 30px; } .form-group > .toggleMask:checked::before{ content:"\\e105"; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group"> <input type='checkbox' class="glyphicon glyphicon-eye-close toggleMask"/> <input type="password" class="form-control" /> </div> 

对于要求IE支持的评论者：

 var toggleInput = document.querySelector('.toggleMask > input'); toggleInput.addEventListener('change', onToggleMaskChange); function onToggleMaskChange(){ this.nextElementSibling.className = this.checked ? this.nextElementSibling.className.replace('open', 'close') : this.nextElementSibling.className.replace('close', 'open') this.parentNode.nextElementSibling.type = this.checked ? 'text' : 'password' } 

 .form-group{ position: relative; width: 50%; /* <-- just for demo */ overflow:hidden; } .form-group > .toggleMask{ position: absolute; top: 3px; right: -30px; text-indent: -30px; height:100%; line-height: 2; pointer-events: auto; z-index: 5; cursor: pointer; } .form-group > .toggleMask ~ input{ padding-right: 30px; } .form-group > .toggleMask:checked > span{ } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class='form-group'> <label class='toggleMask'> <input type='checkbox' hidden/> <i class='glyphicon glyphicon-eye-close'></i> </label> <input type='password' class='form-control' /> </div> 

Answer 2

使用form-control-feedback到i标签

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div> <i class="glyphicon glyphicon-eye-open form-control-feedback"></i> <input type="password" class="form-control" /> </div> 

编辑以使用fontAwesome代替引导程序： https ://www.w3schools.com/icons/fontawesome_icons_webapp.asp

使用:after wrap div

 div:after{ font-family: 'FontAwesome'; position: relative; left: -26px; content: "\\f06e"; } 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div> <input name="username""> </div> 

Answer 3

HTML部分：

<input type="password" value="FakePSW" id="myInput">
<input type="checkbox" onclick="myFunction()">`

JS部分：

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
 }

你可能会用这个