Skip to main content
Commonmark migration
Fonte Link

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

Edit

Usando jQuery para exibir a div quando houver ao menos 1 caractere no campo e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup mouseleave", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup mouseleave", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup mouseleave", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

adicionou 11 caracteres ao conteúdo
Fonte Link
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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup"mouseup mouseleave", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup mouseleave", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

adicionou 687 caracteres ao conteúdo
Fonte Link
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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // pra cadacaptura teclaos pressionadaeventos elekeyup executae osfocus codigosno abaixocampo
   $("[name=senha]").keyupon("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

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>

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 e mostrar a senha ao clicar na div "Mostrar senha":

$(document).ready(function(){
   
   // captura os eventos keyup e focus no campo
   $("[name=senha]").on("keyup focus", function(){
      // mostra/esconde a div se houver ao menos 1 caractere
      $(".show_key")[ $(this).val().length ? 'show' : 'hide' ]();
   });
   
   // captura os eventos de mouse no campo e na div
   $(".show_key, [name=senha]").on("click mousedown mouseup", function(e){
      
      // cancela a bubbling do evento click no "document"
      e.stopPropagation();
      // altera o type do campo
      $("[name=senha]")
      .attr("type", e.type == "mousedown" && !$(e.target).hasClass("input") ? "text" : "password");
      
   });
   
   // esconde a div ao clicar em qualquer parte do documento
   $(document).on("click", function(){
      $(".show_key").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>

adicionou 794 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando
removeu 27 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando