此代码段显示了一个动画密码输入字段。如果在输入字段(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();
});