1

Estou usando LabelFor, queria que ao clicar em cima para digitar a senha, fosse exibido os caracteres, e quando clicar fora fosse ocultado, como poderia fazer?

<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>
1
  • Altere o tipo do input para "text" quando estiver em foco (onfocus), quando não estiver, altere para password. Commented 12/11/2016 às 23:20

2 Respostas 2

1

A lógica seria o seguinte: quando o elemento <input /> receber o foco, precisa ser alterado o atributo type para text e quando perder o foco deve ser alterado o type para password

Segue exemplos:


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>
<input type="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" />

Referencias:

3
  • 1
    Valeu, era isso que eu procurava Commented 12/11/2016 às 23:26
  • 1
    Fiz também uma edição colocando com javascript.
    – novic
    Commented 12/11/2016 às 23:27
  • 1
    eu vi, mas com Jquery já resolveu me problema. Valeu Commented 12/11/2016 às 23:31
0

Encontrei uma solução mais simples. Basta colocar o atributo HTML type, conforme abaixo:

@Html.EditorFor(model => model.Senha, new {htmlAttributes = new { @class = "form-control", @type = "password"}})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .