如何使用 Html 助手在 mvc 中显示密码隐藏字段答案

【问题标题】：how to show the password hidden field in mvc using Html helper如何使用 Html 助手在 mvc 中显示密码隐藏字段
【发布时间】：2018-06-08 23:40:30
【问题描述】：

@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 中实现呢？

【问题讨论】：

Password 和 TextBox 的唯一区别是 html type 属性。使用 jquery 或 javascript 定位元素 id，并将其类型更改为文本。

标签： javascript c# jquery asp.net-mvc asp.net-mvc-4

【解决方案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"/>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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"
}

【讨论】：