在密码输入元素内放置屏蔽/取消屏蔽按钮

Question

enter image description here

我想将切换隐藏/显示的睁眼引导图标添加到我的输入字段。 我已经知道 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 代替 bootstrap: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";
    }
 }

你可以用这个