Skip to main content
3 de 6
adicionou 794 caracteres ao conteúdo
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Pode fazer apenas com CSS:

.show_key{display:none;}
[name=senha]:focus + .show_key{
   display: block;
   
}
<input  class="input" name="senha" type="password" placeholder="Digite a senha" value="">

<div class="show_key">Mostrar senha</div>

Como a div é adjacente ao input, o selector + .show_key irá alterar a sua propriedade ao focar o campo.

##Edit

Usando jQuery para exibir a div quando houver ao menos 1 caractere no campo:

$(document).ready(function(){
   // pra cada tecla pressionada ele executa os codigos abaixo
   $("[name=senha]").keyup(function(){
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
});
.show_key{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  class="input" name="senha" type="password" placeholder="Digite a senha" value="">
<div class="show_key">Mostrar senha</div>

Sam
  • 80,8mil
  • 22
  • 73
  • 128