Input type="password" with password display eye

Question

I need to put a <input type="password"> with that eye of the reveal password, but it has to work as follows:

User clicks on the eye and when dropping hides the characters again.

Follow an example photo:

Answer 1

Using jquery, do the following:

$( "#olho" ).mousedown(function() {
  $("#senha").attr("type", "text");
});

$( "#olho" ).mouseup(function() {
  $("#senha").attr("type", "password");
});

Complete Example:

var senha = $('#senha');
var olho= $("#olho");

olho.mousedown(function() {
  senha.attr("type", "text");
});

olho.mouseup(function() {
  senha.attr("type", "password");
});
// para evitar o problema de arrastar a imagem e a senha continuar exposta, 
//citada pelo nosso amigo nos comentários
$( "#olho" ).mouseout(function() { 
  $("#senha").attr("type", "password");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="password" value="123456789" id="senha">
<img id="olho" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABDUlEQVQ4jd2SvW3DMBBGbwQVKlyo4BGC4FKFS4+TATKCNxAggkeoSpHSRQbwAB7AA7hQoUKFLH6E2qQQHfgHdpo0yQHX8T3exyPR/ytlQ8kOhgV7FvSx9+xglA3lM3DBgh0LPn/onbJhcQ0bv2SHlgVgQa/suFHVkCg7bm5gzB2OyvjlDFdDcoa19etZMN8Qp7oUDPEM2KFV1ZAQO2zPMBERO7Ra4JQNpRa4K4FDS0R0IdneCbQLb4/zh/c7QdH4NL40tPXrovFpjHQr6PJ6yr5hQV80PiUiIm1OKxZ0LICS8TWvpyyOf2DBQQtcXk8Zi3+JcKfNafVsjZ0WfGgJlZZQxZjdwzX+ykf6u/UF0Fwo5Apfcq8AAAAASUVORK5CYII="
/>

Answer 2

Using Javascript only, you can add to an element, in this case it is the tag img, two events (mousedown and mouseup), these will change the property type of input, alternating between text and password.

Take an example:

document.getElementById('olho').addEventListener('mousedown', function() {
  document.getElementById('pass').type = 'text';
});

document.getElementById('olho').addEventListener('mouseup', function() {
  document.getElementById('pass').type = 'password';
});

// Para que o password não fique exposto apos mover a imagem.
document.getElementById('olho').addEventListener('mousemove', function() {
  document.getElementById('pass').type = 'password';
});

#pass {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}

<img src="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" id="olho" class="olho">
<input type="password" id="pass">

Answer 3

Some of the other answers show how to show/hide the password when you click the input, regardless of where you click.

To click to a specific place, eye or text you need to use another element, an image for example:

var input = document.querySelector('#input input');
var img = document.querySelector('#input img');
img.addEventListener('click', function () {
  input.type = input.type == 'text' ? 'password' : 'text';
});

#input > * {
  height: 1.3em;
  float: left;
}

#input img {
  cursor: pointer;
}

<div id="input">
  <input type="password" value="password" />
  <img src="http://i.stack.imgur.com/H9Sb2.png" alt="">
</div>

jsFiddle: http://jsfiddle.net/cj3kmxL4/

---

Edit:

To only show the text on mousedown and hiding again can be used like this: http://jsfiddle.net/cj3kmxL4/1/, that in the background uses the events mouse(up|down) and listen to the event mouseup in window, in case the mouseup be outside the element.

var input = document.querySelector('#input input');
var img = document.querySelector('#input img');
var visivel = false;
img.addEventListener('mousedown', function () {
  visivel = true;
  input.type = 'text';
});
window.addEventListener('mouseup', function (e) {
  if (visivel) visivel = !visivel;
  input.type = 'password';
});

Answer 4

I made an example using the bootstrap to create the eye and the script used is basically the same used in the other answers.

var $spnMostrarSenha = $('#spnMostrarSenha');
var $txtSenha = $('#txtSenha');

$spnMostrarSenha
  .on('mousedown mouseup', function() {
    var inputType = $txtSenha.attr('type') == 'password' ? 'text' : 'password';
    $txtSenha.attr('type', inputType);
  })
  .on('mouseout', function() {
    $txtSenha.attr('type', 'password');
  });

.form-group .glyphicon-eye-open {
  pointer-events: auto;
}
.form-group .glyphicon-eye-open:hover {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="password" class="form-control" id="txtSenha" value="password">
  <span id="spnMostrarSenha" class="glyphicon glyphicon glyphicon-eye-open form-control-feedback"></span>
</div>

Answer 5

Guys look at the solution I made, it was exactly the way I wanted it...

HTML:

<div class="form-group col-sm-6 submit-line">
                <label>Senha:<span class="stf-color-asterisco">*</span></label>
                <div class="submit-line">
                    <input type="password" class="form-control" id="uePassowrd" />
                    <button class="submit-eye" type="submit">
                        <i id="ueEyePass" class="fa fa-eye"></i>
                    </button>
                </div>
            </div>

javascript:

            $("#ueEyePass").mousedown(function () {
                $("#uePassowrd").attr("type", "text");
            });

            $("#ueEyePass").mouseup(function () {
                $("#uePassowrd").attr("type", "password");
            });

css:

.submit-eye {
              position:absolute;
              top:5px; right:0;
              z-index:10;
              border:none;
              background:transparent;
              outline:none;
            }

            .submit-line {
              position: relative;
              /*width: 600px;*/
            }

            .submit-line input {
              width: 100%;
            }

Answer 6

I managed to do it that way, in case anyone’s interested.

<center>

<script>                        
function show() {
  var senha = document.getElementById("senha");
  if (senha.type === "password") {
    senha.type = "text";
  } else {
    senha.type = "password";
  }
}
</script>

<input type="password" name="senha" id="senha" placeholder="Digite a Senha" required>
<input type="checkbox" onclick="show()">
<br><br>
<input type="submit" value="Enviar">

</center>

Answer 7

Pure Javascript

Shows the password while clicking and while the mouse is over the eye is showing no need to mouse pressed (I find it tiring) and just remove the mouse from the eye to hide the password.

function mouseoverPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "text";
}
function mouseoutPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "password";
}
    

#myPassword {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}

Mostra a senha ao clicar e enquanto o mouse estiver sobre o olho fica mostrando sem necessidade de ficar com mouse pressionado (acho cansativo) e basta retirar o mouse de cima do olho para esconder a senha.
<br>

<input type="password" name="password" id="myPassword" size="30" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABDUlEQVQ4jd2SvW3DMBBGbwQVKlyo4BGC4FKFS4+TATKCNxAggkeoSpHSRQbwAB7AA7hQoUKFLH6E2qQQHfgHdpo0yQHX8T3exyPR/ytlQ8kOhgV7FvSx9+xglA3lM3DBgh0LPn/onbJhcQ0bv2SHlgVgQa/suFHVkCg7bm5gzB2OyvjlDFdDcoa19etZMN8Qp7oUDPEM2KFV1ZAQO2zPMBERO7Ra4JQNpRa4K4FDS0R0IdneCbQLb4/zh/c7QdH4NL40tPXrovFpjHQr6PJ6yr5hQV80PiUiIm1OKxZ0LICS8TWvpyyOf2DBQQtcXk8Zi3+JcKfNafVsjZ0WfGgJlZZQxZjdwzX+ykf6u/UF0Fwo5Apfcq8AAAAASUVORK5CYII=" onclick="mouseoverPass();" onmouseout="mouseoutPass();"  id="olho" class="olho"/>

    

Answer 8

<style type="text/css">
  #exibe{
height: 50px;
width: 50px;
background: #000;
  }
</style>

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>

<script>
  $(function($){
      var $senha = $("#senha");
      $("#exibe").on('mouseup mousedown', function(resposta1){
        if ($senha.attr('type') == 'password') {
            $senha.attr("type", "text");
            }else{
            $senha.attr('type', 'password');
            }
          });
      });
</script>

<input type="password" id="senha" value="password" />
<div id="exibe"></div>

Answer 9

var senha = $('#senha');
var olho= $("#olho");

olho.mousedown(function() {
  senha.attr("type", "text");
});

olho.mouseup(function() {
  senha.attr("type", "password");
});
// para evitar o problema de arrastar a imagem e a senha continuar exposta, 
//citada pelo nosso amigo nos comentários
$( "#olho" ).mouseout(function() { 
  $("#senha").attr("type", "password");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="password" value="123456789" id="senha">
<img id="olho" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABDUlEQVQ4jd2SvW3DMBBGbwQVKlyo4BGC4FKFS4+TATKCNxAggkeoSpHSRQbwAB7AA7hQoUKFLH6E2qQQHfgHdpo0yQHX8T3exyPR/ytlQ8kOhgV7FvSx9+xglA3lM3DBgh0LPn/onbJhcQ0bv2SHlgVgQa/suFHVkCg7bm5gzB2OyvjlDFdDcoa19etZMN8Qp7oUDPEM2KFV1ZAQO2zPMBERO7Ra4JQNpRa4K4FDS0R0IdneCbQLb4/zh/c7QdH4NL40tPXrovFpjHQr6PJ6yr5hQV80PiUiIm1OKxZ0LICS8TWvpyyOf2DBQQtcXk8Zi3+JcKfNafVsjZ0WfGgJlZZQxZjdwzX+ykf6u/UF0Fwo5Apfcq8AAAAASUVORK5CYII="
/>