View Ocutar Password using EditorFor

1

I'm using LabelFor, I wanted to click on the above to enter the password, the characters were displayed, and when I clicked off it was hidden, how could I do it?

<div class="form-group">
    @Html.LabelFor(model => model.Senha, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Senha, new { htmlAttributes = new { @class = "form-control"} })
        @Html.ValidationMessageFor(model => model.Senha, "", new { @class = "text-danger" })
    </div>
</div>
    
asked by anonymous 13.11.2016 / 00:12

1 answer

1

The logic would be this: When the <input /> element gets focus, the attribute must be changed type for text and when you lose focus you should change the type for password

Following examples :

jQuery

$(document).ready(function(e) {
  $('#Senha').on('focus', function() {
    $(this).attr('type', 'text');
  }).on('blur', function() {
    $(this).attr('type', 'password');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="password" id="Senha" name="Senha" value="123" />

Javascript :

(function() {
   var senha = document.getElementById('Senha');
   senha.addEventListener('blur', function()
   {
     senha.setAttribute("type", "password");
   });
   senha.addEventListener('focus', function()
   {
     senha.setAttribute("type", "text");
   });
})();
<input type="password" id="Senha" name="Senha" value="123" />

window.onload = function()
{
   var senha = document.getElementById('Senha');        
   senha.addEventListener('blur', function()
   {
     senha.setAttribute("type", "password");
   });
   senha.addEventListener('focus', function()
   {
     senha.setAttribute("type", "text");
   });
}
<input type="password" id="Senha" name="Senha" value="123" />

References:

13.11.2016 / 00:19