38

Preciso colocar um <input type="password"> com aquele olho do revelar senha, porém tem que funcionar da seguinte maneira:

Usuário clica no olho e ao soltar esconde os caracteres novamente.

Segue uma foto de exemplo:

inserir a descrição da imagem aqui

6
  • 1
    O que já testaste?
    – Sergio
    Commented 4/12/2015 às 15:58
  • 2
    O que muitas páginas web utilizam é um checkbox mostrar a senha. Veja esse artigo interessante sobre isso tableless.com.br/precisamos-confirmar-senha Commented 4/12/2015 às 16:01
  • 4
    Você já possui excelentes respostas, então deixarei apenas esta forma utilizando bootstrap para tentar lhe mostrar "outra" forma (é a mesma que já foram apresentadas, mas de uma forma "diferente").
    – Randrade
    Commented 4/12/2015 às 16:28
  • Em todas soluções abaixo existe um problema que no Edge aparece o que o navegador coloca automaticamente, e o feito manualmente.
    – David
    Commented 4/12/2015 às 17:45
  • 2
    posso sim @devgaspa, abri essa pergunta no browser: Microsoft Edge, e o próprio browser coloca o "olho" em campos password, dessa forma ficando duplicado o ícone.
    – David
    Commented 4/12/2015 às 20:08

8 Respostas 8

34

Usando jquery, faça o seguinte:

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

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

Exemplo Completo:

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="
/>

8
  • 1
    Desculpe amigo, mas no olho eu coloco o que? Commented 4/12/2015 às 16:10
  • 2
    Coloca isso - id="olho" Commented 4/12/2015 às 16:11
  • 1
    Em seu html, encontre aonde está aquele "olho" e acrescente o atributo "id" nele colocando como o @TaoPaiPai falou. :) Commented 4/12/2015 às 16:12
  • 4
    Se arrastar o olho e soltar o clique fora, o password fica exposto.
    – bfavaretto
    Commented 4/12/2015 às 19:42
  • 1
    Código para resolução adicionado. Commented 4/12/2015 às 22:14
23

Usando apenas JavaScript, podes adicionar a um elemento, neste caso é a tag img, dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

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

11
  • muito bom, obrigado.
    – David
    Commented 4/12/2015 às 16:25
  • Excelente, me ajudou muito também! Obrigado @devgaspa Commented 4/12/2015 às 18:16
  • 2
    Se arrastar o olho e soltar o clique fora, o password fica exposto.
    – bfavaretto
    Commented 4/12/2015 às 19:43
  • 1
    @devgaspa é isso mesmo, o mouseup ocorre fora. O que significa que também dá pra resolver por delegação :)
    – bfavaretto
    Commented 4/12/2015 às 20:15
  • 1
    O Sergio colocou um exemplo com delegação na resposta dele agora.
    – bfavaretto
    Commented 4/12/2015 às 20:21
14

Algumas das outras respostas mostram como mostrar /esconder a password quando se clicar no input, independentemente de onde se clique.

Para o clique ser num sítio específico, olho ou texto é preciso usar um outro elemento, uma imagem por exemplo:

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="https://i.sstatic.net/H9Sb2.png" alt="">
</div>

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


Edit:

Para só mostrar o texto no mousedown e esconder de novo pode usar-se assim: http://jsfiddle.net/cj3kmxL4/1/, que no fundo usa os eventos mouse(up|down) e escuta o evento mouseup na window, para o caso de o mouseup ser fora do elemento.

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';
});
3
  • 1
    Quem deu o -1 pode comentar se há algo de errado na minha resposta...
    – Sergio
    Commented 4/12/2015 às 18:17
  • 1
    Achei interessante o modo como usou o operador ternário. Commented 4/12/2015 às 18:38
  • Sergio, ótimo o método usado em seu código para tratar o mouseup fora do elemento. Commented 4/12/2015 às 21:31
7

Fiz um exemplo utilizando o bootstrap para criar o olho e o script usado é basicamente o mesmo utilizado nas demais respostas.

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>

1
  • 1
    Diferente dos outros esse código no IE 11 não aparece dois olhos. +1
    – Marconi
    Commented 22/08/2016 às 16:52
2

Galera olhem a solução que fiz, ficou exatamente do jeito que eu queria...

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%;
            }
2

Javascript puro

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.

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"/>

    

1

Consegui fazer desse jeito, se caso alguem se interesse.

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

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

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 .