在焦点/模糊处显示/隐藏元素

Question

这段代码 sn-p 显示了一个动画密码输入字段。如果您单击输入字段 (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>

Answer 1

将您的字段图标 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();
});

Answer 2

你可以做这样的事情。检查图标是否可见，如果是 -> 隐藏它，否则 -> 显示它。并首先将其隐藏在 CSS 中。

var pswIcon = $(".toggle-password")

$("#password-field").on('focus blur', function() {
  $(pswIcon).is(":visible") ? $(pswIcon).hide() : $(pswIcon).show()
  })

$(pswIcon).click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

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

.container{
  padding-top:50px;
  margin: auto;
}

.fa.toggle-password {
  display:none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">

    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-horizontal" method="" action="">

          <div class="form-group">
            <label class="col-md-4 control-label">Email</label>
            <div class="col-md-6">
              <input type="email" class="form-control" name="email" value="">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Password</label>
            <div class="col-md-6">
              <input id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Answer 3

检查一次。

/*$(document).ready(function() {

  $('.inputcontainer input').click(function() {
    $(this).parent('.inputcontainer').addClass('show');
    //$('.toggleplaceholder').show();
  });

  $(document).click(function() {
    $('.inputcontainer').removeClass('show');
    //$('.toggleplaceholder').hide();
  });
});*/

$(document).ready(function(){
    
    $('.inputcontainer').click( function(e) {
        
        e.preventDefault(); // stops link from making page jump to the top
        e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
        $(this).addClass('show');
        
    });
    
    $('.toggleplaceholder').click( function(e) {
        
        e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too
        
    });
    
    $('html').click( function() {
       
        $('.inputcontainer').removeClass('show');
        
    });
    
});

.toggleplaceholder {
  display: none;
}

.show .toggleplaceholder {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inputcontainer">
  <input type="password" placeholder="password">
  <span class="toggleplaceholder"><i class="fas fa-eye"></i></span>
</div>