I need to put a <input type="password"> with that password reveal eye, however it has to work as follows:
User clicks on eye and loosens the characters again.
Here is a sample photo:
Input type="password" with the eye to show password
34
asked by anonymous 04.12.2015 / 16:56
6 answers
30
Using jquery, do the following:
$( "#olho" ).mousedown(function() {
$("#senha").attr("type", "text");
});
$( "#olho" ).mouseup(function() {
$("#senha").attr("type", "password");
});
Full 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><inputtype="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="
/>
04.12.2015 / 17:00
20
Using only JavaScript, you can add to an element, in this case it is the tag img , two events ( mousedown and mouseup ), these will change the type of input , alternating between text and password .
See 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">
04.12.2015 / 17:04
12
Some of the other answers show how to show / hide the password when clicking the input, regardless of where you click.
For the click to be in a specific site, eye or text it is necessary 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: link
Edit:
To just show the text in mousedown and hide again you can use this: link , which in the background it uses the mouse(up|down) events and listens for the mouseup event in window , in case the mouseup is 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';
});
04.12.2015 / 17:18
7
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><divclass="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>
04.12.2015 / 18:10
1
Galera 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%;
}
06.12.2015 / 23:47
-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>
17.04.2016 / 21:46