Function - show password!

Question

I rephrased the question, what I’m trying to do is the following, Goal is to do the same as IE does in 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>

Added

What I need is: the input starts with type password, and if the user is going to type and the field contains 1 or more characters the div "show_key" appears, and clicking on it change the type password to type text, if I drop show_key it returns to type password, and if I click out of the input the div "show_key" goes away, basically the function that that eye icon that some systems have does to show the password!

I thank you all.

Answer 1

Can do with CSS only:

.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>

Since the div is adjacent to the input, the selector + .show_key will change its property by focusing the field.

Edit

Using jQuery to display the div when there is at least 1 character in the field and show the password by clicking on the div "Show password":

$(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>

Answer 2

Have an option to do this "check" only with CSS used to pseudo-class :placeholder-shown. So you won’t even need to enter a class .active on the label, because the check is on input + label for css

It works that way:

If the input have a placeholder active, that is, if the input is empty only with the placeholder appearing normally to label which comes next will stick with the red text for example.

However, if you have something written inside the input, that is, if the placeholder NO longer active (as you will have something written inside), the option "Show Password" appears.

See the example below to better understand:

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>

Note 2: No works on IE and Edge https://caniuse.com/#search=placeholder-Shown

Answer 3

You can do it this way, although there are better ways:

$('.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>

Using the event focus, whenever the input receives focus I remove the class that hides the div. And in the event focusout, whenever the focus goes to another node, adds again the class that hides the div.