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:
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="
/>
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">
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>
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';
});
-1
pode comentar se há algo de errado na minha resposta...
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>
IE 11
não aparece dois olhos. +1
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%;
}
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"/>
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>
<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>
checkbox
mostrar a senha
. Veja esse artigo interessante sobre isso tableless.com.br/precisamos-confirmar-senha