JavaScript：显示密码保持答案

【问题标题】：JavaScript: show password on holdJavaScript：显示密码保持
【发布时间】：2017-02-19 01:25:48
【问题描述】：

我有 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', '#some-parent-id').//logic

标签： javascript jquery html input

【解决方案1】：

当你使用$(".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');
});

【讨论】：

【解决方案2】：

只针对前一个输入，而不是给定类的所有输入

 $(".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>

【讨论】：

【解决方案3】：

在反应中我们只是用

我们可能需要用到onMouseDown和onMouseUp、onMouseOut事件

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

【讨论】：

查看问题上的标签（以及其中的代码）。他们使用的是 jQuery，而不是 React。
您也未能定义您传递给事件处理程序道具的任何函数。