此代码段显示了一个动画密码输入字段。如果在输入字段(onFocus)上单击,则会出现一个切换眼睛图标,以显示或隐藏密码。离开输入字段焦点(onBlur)之后,眼睛图标消失。现在我的问题是,拨动眼形图标现在无法单击。我不知道如何解决他。

有谁能够帮助我?

提前致谢



  function showeye() {
	var string = '<i class="glyphicon glyphicon-eye-open form-control-feedback"></i>';
        	document.getElementById('showhide').innerHTML = string;
      }

      function hideeye() {
	var string = '';
        	document.getElementById('showhide').innerHTML = string;
      }

var $inputItem = $(".js-inputWrapper");
  $inputItem.length && $inputItem.each(function () {
  var $this = $(this),
  $input = $this.find(".formRow--input"),
  placeholderTxt = $input.attr("placeholder"),
  $placeholder;

$input.after('<span class="placeholder">' + placeholderTxt + "</span>"),
  $input.attr("placeholder", ""),
  $placeholder = $this.find(".placeholder"),
  $input.val().length ? $this.addClass("active") : $this.removeClass("active"),

  $input.on("focusout", function () {
    $input.val().length ? $this.addClass("active") : $this.removeClass("active");
  }).on("focus", function () {
    $this.addClass("active");
  });
});


// toggle password visibility
$('#password + .glyphicon').on('click', function () {
  $(this).toggleClass('glyphicon-eye-close').toggleClass('glyphicon-eye-open'); // toggle our classes for the eye icon
  $('#password').togglePassword(); // activate the hideShowPassword plugin
});

<style>@import url('https://fonts.googleapis.com/css?family=Lato');*,*:before,*:after{box-sizing: border-box;}html,body{display:flex;align-items:center;justify-content:center;}.wrapper{width:400px; max-width:80%;}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<style type="text/css">
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 0.3em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
      .formRow {
  position: relative;
  width: 100%;
}
.formRow--item {
  display: block;
  width: 100%;
}
.formRow--input {
  position: relative;
  padding: 15px 20px 11px;
  width: 100%;
  outline: none;
  border: solid 1px #95989a;
  border-radius: 4px;
  color: #2c3235;
  letter-spacing: .2px;
  font-weight: 400;
  font-size: 16px;
  resize: none;
  transition: all .2s ease;
}
.formRow--input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.formRow--input-wrapper.active .placeholder {
  top: -5px;
  background-color: #ffffff;
  color: #fd999a;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 11px;
  line-height: 14px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.formRow--input-wrapper.active .formRow--input:not(:focus):not(:hover) ~ .placeholder {
  color: #fec8c9;
}
.formRow--input-wrapper .formRow--input:focus, .formRow--input-wrapper .formRow--input:hover {
  border-color: #fd999a;
}
.formRow .placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  padding: 0 10px;
  color: #95989a;
  white-space: nowrap;
  letter-spacing: .2px;
  font-weight: normal;
  font-size: 16px;
  transition: all, .2s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
   #password + .glyphicon {
   cursor: pointer;
   pointer-events: all;
 }

#wrapper {
  max-width: 500px;
  margin: auto;
  padding-top: 25vh;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.1.1/hideShowPassword.min.js"></script>

<div class="wrapper">
<fieldset class="formRow">
<div class="formRow--item">
<br /><br /><br /><br />
<label for="password" class="formRow--input-wrapper js-inputWrapper">
<div class="form-group has-feedback">
<input type="password" class="form-control formRow--input js-input" name="password" id="password" placeholder="Password" onFocus="showeye();" onBlur="hideeye();">
<div id="showhide"></div>
</div>
</label>
</div>
</fieldset>
</div>

最佳答案

将您的field-icon CSS更改为此

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  display: none
}


并将其添加到您的jquery

$("#password-field").focusin(function () {
  $(".field-icon").show();
});

$("#password-field").focusout(function () {
  $(".field-icon").hide();
});

10-05 21:02
查看更多