javascript - how to show the password hidden field in mvc using Html helper - Stack Overflow

admin管理员组

文章数量:1305403

@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 bees 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?

@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 bees 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?

• javascript
• c#
• jquery
• asp-mvc
• asp-mvc-4

Share Improve this question Follow edited Dec 28, 2017 at 12:14 Zabavsky 13.6k88 gold badges5757 silver badges8080 bronze badges asked Dec 28, 2017 at 12:06 user8256152user8256152 1

• 2 The only different between Password and TextBox is the html type attribute. Use jquery or javascript to locate the element id, and change its type to text. – Orel Eraki Commented Dec 28, 2017 at 12:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  type="password"  class="form-control pwd">
<input type="button" class="btnShow" value="show"/>

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

just replace the #Password with your selector and if you want to change it back just do:

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

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>

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"
}

本文标签： javascripthow to show the password hidden field in mvc using Html helperStack Overflow