Question

@Html.Password("pasword", null, new { @class = "form-control frmField", placeholder = "Password" })

我正在使用这个，我希望这里应该是我点击的一个按钮，密码变得可见。我知道这将通过jquery或Javascript，但我无法理解在mvc中。如何在mvc中应用该技术？

<input data-toggle="password" type="password"  data-placement="after" data-eye-class="glyphicon" data-eye-open-class="glyphicon glyphicon-eye-open" data-eye-close-class="glyphicon glyphicon-eye-close" data-eye-class-position="true" class="form-control pwd">
<input type="text" class="form-control" placeholder="password" style="display:none;" />

我用过这个并且效果很好。如何在mvc中实现它？

Answer 1

将密码类型更改为文字类型

$( ".btnShow" ).mousedown(function() {
  $(".pwd").attr("type","text");
});
$( ".btnShow" ).on("mouseleave",function() {
  $(".pwd").attr("type","password");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  type="password"  class="form-control pwd">
<input type="button" class="btnShow" value="show"/>

Answer 2

$("#Password").attr("type","text")

只需将#Password替换为您的选择器，如果您想要将其更改回来，请执行以下操作：

$("#Password").attr("type","password")

Answer 3

在您的网页中添加javascript以实现它。这是一个供您参考的样本。

@Html.Password("pasword", null, new { @class = "form-control frmField", placeholder = "Password" })
<input type="button" id="showHidePassword" value="Show" />

<script>
    $("#showHidePassword").click(function(){
         if($(this).val() == "Show"){
             $(this).val("Hide");
             $("#password").attr("type", "text");
         } else {
             $(this).val("Show");
             $("#password").attr("type", "password");
         }
    });
</script>

Answer 4

使用以下行

将ID分配给密码字段

<input id="passwordField" data-toggle="password" type="password"  data-placement="after" data-eye-class="glyphicon" data-eye-open-class="glyphicon glyphicon-eye-open" data-eye-close-class="glyphicon glyphicon-eye-close" data-eye-class-position="true" class="form-control pwd">
<input type="checkbox" onclick="ShowHidePass(this)" />

将以下JS函数添加到脚本块

function ShowHidePass(objChk)
{
if(objChk.checked)
    passwordField.type="text"
  else
  passwordField.type="password"
}

如何使用Html帮助器在mvc中显示密码隐藏字段

4 个答案: