【发布时间】：2020-03-11 22:07:13
【问题描述】：
我在所有表单输入中都使用 Bootstrap bootstrap-float-label。
参考 => https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css
注意 => 我已根据自己的要求进行了更改，并在代码片段中添加了修改后的 bootstrap-float-label.css。
案例：密码输入字段
Example-1 没有 bootstrap-float-label，密码显示/隐藏工作完美。
Example-2 使用 bootstrap-float-label，密码显示/隐藏不起作用。
Example-2 问题 => 在旧密码字段中，插入密码后，当我点击显示时，<span class="has-float-label" 得到type="password"，因为我使用了 2 次prev().prev().
我不知道如何进入 <span class="has-float-label" 并找到 <input type="password" 并将值切换为文本/密码。
$(document).ready(function(){
$('.pass_show').append('<span class="ptxt">Show</span>');
});
$(document).on('click','.pass_show .ptxt', function(){
$(this).text($(this).text() == "Show" ? "Hide" : "Show");
$(this).prev().prev().attr('type', function(index, attr){return attr == 'password' ? 'text' : 'password'; });
});/*bootstrap-float-label.css*/
.has-float-label{
display:block;
position:relative;
width:100%;
}
.has-float-label label,.has-float-label>span{
position:absolute;
cursor:text;
font-size:75%;
opacity:1;
-webkit-transition:all .2s;
transition:all .2s;
top:-.5em;
left:.75rem;
z-index:3;
line-height:1;
padding:0 3px;
background:#fff;
font-weight:normal;
}
.has-float-label>span{/*For select2-bootstrap dropdown set top,left margin 0*/
top:0;
left:0;
}
.has-float-label label::after,.has-float-label>span::after{
content:" ";
display:block;
position:absolute;
background:#fff;
height:2px;
top:50%;
left:-.2em;
right:-.2em;
z-index:-1;
}
.has-float-label .form-control::-webkit-input-placeholder{
opacity:1;
-webkit-transition:all .2s;
transition:all .2s;
}
.has-float-label .form-control::-moz-placeholder{
opacity:1;
transition:all .2s;
}
.has-float-label .form-control:-ms-input-placeholder{
opacity:1;
transition:all .2s;
}
.has-float-label .form-control::placeholder{
opacity:1;
-webkit-transition:all .2s;
transition:all .2s;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder{
opacity:0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder{
opacity:0;
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder{
opacity:0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder{
opacity:0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)+*{
font-size:100%;
color: #6c757d;
opacity: 1;
top:.3em;
}
.input-group .has-float-label{
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1;
margin-bottom:0;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
margin-top: 6px;
}
/*pass_show*/
.pass_show {
position: relative
}
.pass_show .ptxt {
position: absolute;
top: 50%;
right: 10px;
z-index: 1;
color: #f36c01;
margin-top: -10px;
cursor: pointer;
transition: .3s ease all;
}
.pass_show .ptxt:hover {
color: #333333;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="form-group"><b>EXAMPLE-1 : Without bootstrap-float-label.css</b></div>
<div class="form-group pass_show">
<label for="opass">Old Password <span class="required">*</span></label>
<input type="password" name="opass" class="form-control" id="opass" placeholder="Old Password" required="required" autocomplete="off">
<span id="error_opass" class="error"></span>
</div>
<div class="form-group"><b>EXAMPLE-2 : With bootstrap-float-label.css</b></div>
<div class="form-group pass_show">
<span class="has-float-label">
<input type="password" name="txtoldpass" class="form-control" id="txtoldpass" placeholder="Old Password" required="required" autocomplete="off">
<label for="txtoldpass">Old Password <span class="required">*</span></label>
</span>
<span id="error_oldpass" class="error"></span>
</div>
<div class="form-group pass_show">
<span class="has-float-label">
<input type="password" name="txtnewpass" class="form-control" id="txtnewpass" placeholder="New Password" required="required" autocomplete="off">
<label for="txtnewpass">New Password <span class="required">*</span></label>
</span>
<span class="instruction">Password must have a minimum of 8 characters and Include: at least 1 number, at least 1 uppercase letter, at least 1 lowercase letter, at least 1 special character.</span><br>
<span id="error_newpass" class="error"></span>
</div>
</div>
</div>
</div>【问题讨论】：
标签： jquery css twitter-bootstrap input