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

Posted 2023-02-22

【中文标题】如何使用 Html 助手在 mvc 中显示密码隐藏字段

【英文标题】：how to show the password hidden field in mvc using Html helper

【发布时间】：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，并将其类型更改为文本。

【参考方案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"