如何使用HTML Helper在MVC中显示密码隐藏字段

Question

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

I am using this and I want that here should be one button which I click and the the password becomes visible. I know this will be through jquery or Javascript, but I am not able to understand that in mvc. How to apply that technique in 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;" /> 

I have used this and it worked good. How to implement this in mvc?

Answer 1

change Password type to text type

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

Add the javascript in your page to achieve it. Here is a sample for your reference.

@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

Assign a Id to the password field using the below line

<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)" />

Add the following JS function to script block

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