Question

我有两个输入字段。一个用于密码，另一个用于确认密码。我想为两个输入字段都显示/隐藏密码功能。

我已经为它编写了代码，但是它仅适用于密码输入字段。

<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a id="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a id="showPassword"><i class="material-icons">visibility</i></a>
</div>


<script type="text/javascript">
$(document).ready(function() {
$("#showPassword").click(function(){
    var foo = $(this).prev().attr("type");
    if(foo == "password"){
        $(this).prev().attr("type", "text");
    } else {
        $(this).prev().attr("type", "password");
        }
    });
});
</script>

Style.css

#showPassword{
    position:absolute;
    right: 0px;
    top: 12px;
    color: #000;
}

如何使确认密码字段具有显示/隐藏功能？

Answer 1

您有两个具有相同id的项目，因此该事件仅在第一个事件上触发。最好改用class：

<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a id="password" class="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a id="password_confirm" class="showPassword"><i class="material-icons">visibility</i></a>
</div>


<script type="text/javascript">
$(document).ready(function() {
  $(".showPassword").click(function() {
    var foo = $(this).prev().attr("type");
    if (foo == "password") {
      $(this).prev().attr("type", "text");
    } else {
      $(this).prev().attr("type", "password");
    }
  });
});
</script>

Answer 2

希望您也一样。

    Printlist(G, *L);

$(document).ready(function() {
$(".showPassword").click(function(){
    var foo = $(this).prev().attr("type");
    if(foo == "password"){
        $(this).prev().attr("type", "text");
    } else {
        $(this).prev().attr("type", "password");
        }
    });
});

Answer 3

它不能使用2个相同的ID。您有两次showPassword ID。重命名第二个，并为此ID创建相同的脚本。或者直接使用类。

为什么显示/隐藏密码仅在一个输入字段上起作用

3 个答案: