3

Reformulei a pergunta, oque estou tentando fazer é o seguinte, Objetivo é fazer igual o IE faz nos inputs type password!

 <style>.show_key{display:none;}</style>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script>
    $(document).ready(function(){

$(".show_key").mousedown(function() {
    $(".hide-pass-input").attr("type", "text")
});
$(".show_key").mouseup(function() {
    $(".hide-pass-input").attr("type", "password")
}); 
$(".show_key").mouseout(function() {
    $(".hide-pass-input").attr("type", "password")
});


$(".hide-pass-input").keyup(function(){
var num = $(".hide-pass-input").val().length;
if(num>=1){
$(".show_key").show();
}
else{
$(".show_key").hide();  

    }
  });
 });

});
    </script>

    <input  class="hide-pass-input" name="senha" type="password" placeholder="Digite a senha" value="">

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

Adicionado

O que preciso é: o input inicia com type password, e se o usuário for digitar e o campo conter 1 ou mais caracteres a div "show_key" aparece,e clicando nela ela alterar o type password para type text, se eu soltar o show_key ele retorna para type password, e se eu clicar fora do input a div "show_key" some, basicamente a função que aquele ícone de olho que alguns sistemas tem faz para mostrar a senha!

Agradeço a todos.

2
  • Se você colocar o seu if/else dentro de um evento .change deve executar do jeito que você quer. Commented 6/03/2019 às 18:28
  • Por favor se conseguir enviar o código modificado agradeço não sou bom em Js, sei muito, mas muito pouco! Commented 6/03/2019 às 18:31

3 Respostas 3

9

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>

13
  • Bom crio que com apenas ccs não vai ser possível fazer o que quero pois, pois quando tiro o Focus e vou tentar clicar no "Mostrar senha" a div some, e precisava que a div só aparecesse se o campo fosse maior que 1 caractere Commented 6/03/2019 às 18:45
  • Jovem, a pergunta não diz isso.
    – Sam
    Commented 6/03/2019 às 18:46
  • Vou modificar todo post! Commented 6/03/2019 às 18:54
  • Funcionando, apenas não está sumindo show_key se clicar fora do input.. e alterando o type password para text se eu manter pressionado o show_key Commented 6/03/2019 às 19:04
  • 1
    não sabia que era possível fazer isso de mudar qual a função chamada dessa forma @Sam. Obrigado. Commented 6/03/2019 às 19:04
6

Tem uma opção para fazer essa "verificação" apenas com CSS usado a pseudo-classe :placeholder-shown. Assim vc nem vai precisar de inserir uma classe .active no label, pois a verificação é no input + label pelo css

Funciona assim:

Se o input tiver um placeholder ativo, ou seja, se o input estiver vazio apenas com o placeholder aparecendo normalmente a label que vem a seguir vai ficar com o texto vermelho por exemplo.

Porém, se tiver algo escrito dentro do input, ou seja, se o placeholder NÃO estiver mais ativo (pois vai ter algo escrito dentro), a opção "Mostrar Senha" aparece.

Veja o exemplo abaixo para entender melhor:

input:placeholder-shown + label {
    color: red;
display:none;
}
input:not(:placeholder-shown) + label {
    color: green;
    font-weight: bold;
display:block;
}
Escreva algo nesse input vai aparecer o "Mostrar Senha"<br>
<input type="password" placeholder="com placeholder / sem value" value="" name="" id="app">
<label for="app">Mostrar Senha</label>

<br>
<br>
<br>

Esse input já tem um valor no value<br>
Apague  o texto do input!<br>
<input type="password" placeholder="meu placeholder" value="com value senha" name="" id="app">
<label for="app">Já aparece o "mostrar senha"</label>

OBS 2: Não funciona no IE e Edge https://caniuse.com/#search=placeholder-shown

4
  • Olha com puro CSS também é uma boa,ótimo ideia, ficou muito bom. Commented 6/03/2019 às 19:31
  • E como é que faz pra mostrar a senha? :D
    – Sam
    Commented 6/03/2019 às 19:48
  • @Sam seria mais fácil fazer uma função para trocar o tipo do input de password para text, mas ai eh com o povo do js. A intenção minha era mesmo só mostrar o elemento seguinte se tiver algo escrito no input.
    – hugocsl
    Commented 6/03/2019 às 20:49
  • @CaioLourençon valeu jovem, essa solução ajuda, mas para revelar o texto realmente precisa de um js, essa técnica só serve para mostrar o elemento seguinte , caso o input tenha um value
    – hugocsl
    Commented 6/03/2019 às 20:50
1

Você pode fazer desta forma, apesar de existirem formas melhores:

$('.input').keyup(function() {
    if($(this).val().length > 0) {
        $('#show_key').removeClass('show_key');
    }
});

$('.input').focusout(function() {
    if($(this).val().length === 0) {
        $('#show_key').addClass('show_key');
    }
});
.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 id="show_key" class="show_key">Mostrar senha</div>

Usando o evento focus, sempre que o input receber foco eu removo a classe que esconde a div. E no evento focusout, sempre que o foco for para outro nó, adiciona novamente a classe que esconde a div.

4
  • Bom assim resolveu em partes, pois quando tiro o Focus e vou tentar clicar no "Mostrar senha" a div some, e precisava que a div só aparecesse se o campo fosse maior que 1 caractere Commented 6/03/2019 às 18:43
  • Você não havia especificado isso. Pediu pra div sumir quando o foco saisse do input, e ao clicar na div o foco vai sair do input... Especifique exatamente o que você quer para que possamos ajudar. Commented 6/03/2019 às 18:45
  • Pronto, agora faz o que você quer. Commented 6/03/2019 às 18:48
  • vou modificar todo post! Commented 6/03/2019 às 18:54

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 .