Блог

У меня есть 2 входа для паролей. В каждом поле ввода есть кнопка «показать», которая показывает пароль при удержании этой кнопки.

 <form name="resetting_form" method="post" action="">
    <div class="form-group has-feedback">
        <input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
        <span class="show">show</span>
    </div>
    <div class="form-group has-feedback">
        <input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
        <span class="show">show</span>
    </div>  
    <input type="submit" class="btn btn-primary" value="Submit">
</form>
  

Вот что у меня есть

 $(".form-control").on("keyup",function(){
    if ($(this).val())
        $(".show").show();
    else
        $(".show").hide();
});

$(".show").mousedown(function(){
    $(".form-control").attr('type','text');
}).mouseup(function(){
    $(".form-control").attr('type','password');
}).mouseout(function(){
    $(".form-control").attr('type','password');
});
  

Проблема

Когда я нажимаю кнопку «показать», отображаются оба поля ввода. Как убедиться, что отображается только соответствующий пароль?

При использовании $(".form-control") jquery выберите все .form-control элементы. Но вам нужно выбрать целевой элемент с помощью this переменной в функции события и использовать .prev() для выбора предыдущего элемента.

 $(".show").mousedown(function(){
    $(this).prev().attr('type','text');
}).mouseup(function(){
    $(this).prev().attr('type','password');
}).mouseout(function(){
    $(this).prev().attr('type','password');
});
  

Просто укажите предыдущий ввод вместо всех вводов с данным классом

  $(".form-control").on("keyup", function() {
   if ($(this).val())
     $(this).next(".show").show();
   else
     $(this).next(".show").hide();
 }).trigger('keyup');

 $(".show").mousedown(function() {
   $(this).prev(".form-control").prop('type', 'text');
 }).mouseup(function() {
   $(this).prev(".form-control").prop('type', 'password');
 }).mouseout(function() {
   $(this).prev(".form-control").prop('type', 'password');
 });  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="resetting_form" method="post" action="">
  <div class="form-group has-feedback">
    <input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
    <span class="show">show</span>
  </div>
  <div class="form-group has-feedback">
    <input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
    <span class="show">show</span>
  </div>

  <input type="submit" class="btn btn-primary" value="Submit">
</form>  

В react мы просто делаем с

Вероятно, нам нужно использовать события OnMouseDown и OnMouseUp, onMouseOut

 onMouseDown={handleShowPassword}
onMouseUp={handleShowPassword}
onMouseOut={handleShowPasswordHideOnMouseOut}