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

Question

在此处输入图像描述

我想在我的输入字段中添加切换隐藏/显示的睁眼引导图标。我已经知道 javascript 来做到这一点。我只想如何将眼睛图像添加到输入字段。

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

标签： htmlcss

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>