Я использую Bootstrap bootstrap -float-label со всеми входами моих форм.
Ref => https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css
Примечание => I внесены изменения в соответствии с моими требованиями, и я добавил свою модифицированную bootstrap -float-label. css в фрагмент кода.
Case: для поля ввода пароля
Пример-1 Без bootstrap -float-label, пароль показать / скрыть работает идеально.
Пример-2 С bootstrap -float- ярлык, пароль показать / скрыть не работает.
Пример-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>