comment rendre la valeur de la zone de texte du mot de passe visible du survol d'une icône
Bonne journée à tous
J'ai un formulaire qui a un champ de mot de passe:
<input type="password" name="password" size="30" />
Naturellement, le texte saisi sera remplacé par (*).
Donc, si l'utilisateur a tapé 123, la boîte affichera ***.
Jusqu'ici, c'est simple, mais ...
Maintenant, je veux ajouter une petite icône à côté de la zone de mot de passe afin que, lorsque l'utilisateur survole cette icône, il puisse voir ce qu'il a saisi jusqu'à présent.
Ainsi, lors du survol, la boîte affichera 123 et lorsque l'utilisateur quittera l'icône, la boîte devrait afficher à nouveau ***.
Est-il possible de faire cela avec JavaScript? En outre, j'utilise HTML et PHP.
MODIFIER:
Ça n'a pas vraiment besoin d'être une icône, ça pourrait être une case à cocher ou un bouton ... ET si cela pouvait être fait en CSS, j'apprécierais vraiment de savoir comment
P.S. J'ai googlé et fouillé dans le stackoverflow mais sans succès
Vous devrez obtenir la zone de texte via javascript lorsque vous passerez la souris dessus et changerez sa type en text. Et lorsque vous le déplacerez, vous voudrez le remettre à password. Aucune chance de faire cela en CSS pur.
HTML:
<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />
JS:
function mouseoverPass(obj) {
var obj = document.getElementById('myPassword');
obj.type = "text";
}
function mouseoutPass(obj) {
var obj = document.getElementById('myPassword');
obj.type = "password";
}
Comme ces gars l'ont dit, il suffit de changer le type d'entrée.
Mais n’oubliez pas de changer également de type.
Voir ma démo simple jquery: http://jsfiddle.net/kPJbU/1/
HTML:
<input name="password" class="password" type="password" />
<div class="icon">icon</div>
jQuery:
$('.icon').hover(function () {
$('.password').attr('type', 'text');
}, function () {
$('.password').attr('type', 'password');
});
J'utilise cette ligne de code, il devrait le faire:
<input type="password"
onmousedown="this.type='text'"
onmouseup="this.type='password'"
onmousemove="this.type='password'">
Exemple complet ci-dessous. J'adore le copier/coller :)
HTML
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="secret">
<span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
.field-icon {
float: right;
margin-right: 8px;
margin-top: -23px;
position: relative;
z-index: 2;
cursor:pointer;
}
.container{
padding-top:50px;
margin: auto;
}
JS
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
Essayez-le ici: https://codepen.io/anon/pen/ZoMQZP
1 minute de recherche sur Google m'a donné ce résultat . Voir la démo !
HTML
<form>
<label for="username">Username:</label>
<input id="username" name="username" type="text" placeholder="Username" />
<label for="password">Password:</label>
<input id="password" name="password" type="password" placeholder="Password" />
<input id="submit" name="submit" type="submit" value="Login" />
</form>
jQuery
// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
var el = $(this),
elPH = el.attr("placeholder");
el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
});
$('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');
// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
var elText = $(this).val();
$('.passText').val(elText);
});
$('.passText').keyup(function () {
var elText = $(this).val();
$('input[type=password]').val(elText);
});
// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
$('input[type=password], .passText').toggleClass("offPage");
e.preventDefault(); // <-- prevent any default actions
});
CSS
.offPage {
position: absolute;
bottom: 100%;
right: 100%;
}
une réponse rapide non testée sur plusieurs broseurs, fonctionne sur gg chrome/win
-> Événement en discussion -> Afficher/masquer le mot de passe
<input type="password" name="password">
script jQuery
// show on focus
$('input[type="password"]').on('focusin', function(){
$(this).attr('type', 'text');
});
// hide on focus Out
$('input[type="password"]').on('focusout', function(){
$(this).attr('type', 'password');
});
Son simple javascript. Terminé en basculant sur l'attribut type de l'entrée. Vérifiez ceci http://jsfiddle.net/RZm5y/16/
<script>
function seetext(x){
x.type = "text";
}
function seeasterisk(x){
x.type = "password";
}
</script>
<body>
<img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<input id = "a" type = "password"/>
</body>
Essayez ceci voir si cela fonctionne
Essaye ça :
En HTML:
<!-- An Input PassWord Field With Eye Font-Awesome Class -->
<input type="password" placeholder="Type Password">
<i class="show-pass fa fa-eye fa-lg"></i>Dans Jquery:
// Convert Password Field To Text On Hover.
var passField = $('.password');
$('.show-pass').hover(function() {
passField.attr('type', 'text');
}, function() {
passField.attr('type', 'password');
})En CSS si vous aimez le styler.
.show-pass {
position: absolute;
top: 17px;
right: -30px;
}