此代码段显示了一个动画密码输入字段。如果在输入字段（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>
答案 0 :(得分：1)
将您的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();
});
答案 1 :(得分：0)
好吧，你可以做这样的事情。检查图标是否可见，如果是->隐藏它，否则->显示它。并首先将其隐藏在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>
答案 2 :(得分：-1)
检查一次。
/*$(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>