Good day all,
I have a form that has a password field:
<input type="password" name="password" size="30" />
Naturally, the input text will be replaced by (*).
So if the user typed 123 the box will show ***.
Up to here, it is straight forward, but...
Now, I wanna add a small icon next to the password box so when the user hover over this icon, he can see what he has entered so far.
So, while hovering, the box will show 123 and when the user leaves the icon the box should show *** again.
Is there any way to do this with JavaScript? Also, I am using HTML and PHP.
EDIT:
It really doesn't need to be an icon, it could be a checkbox or a button... AND if it could be done in CSS, I would really appreciate to know how
P.S. I've googled and search the stackoverflow but with no luck
This question is related to
javascript
jquery
html
css
Complete example below. I just love the copy/paste :)
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");
}
});
Try it here: https://codepen.io/anon/pen/ZoMQZP
I use this one line of code, it should do it:
<input type="password"
onmousedown="this.type='text'"
onmouseup="this.type='password'"
onmousemove="this.type='password'">
<html>
<head>
</head>
<body>
<script>
function demo(){
var d=document.getElementById('s1');
var e=document.getElementById('show_f').value;
var f=document.getElementById('show_f').type;
if(d.value=="show"){
var f= document.getElementById('show_f').type="text";
var g=document.getElementById('show_f').value=e;
d.value="Hide";
} else{
var f= document.getElementById('show_f').type="password";
var g=document.getElementById('show_f').value=e;
d.value="show";
}
}
</script>
<form method='post'>
Password: <input type='password' name='pass_f' maxlength='30' id='show_f'><input type="button" onclick="demo()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;"><br><br>
<input type='submit' name='sub' value='Submit Now'>
</form>
</body>
</html>
As these guys said, just change input type.
But do not forget to change type back as well.
See my simple jquery demo: 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');
});
a rapid response not tested on several brosers, works on gg chrome / win
-> On focus event -> show/hide password
<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');
});
1 minute googling gave me this result. See the DEMO!
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%;
}
Its simple javascript. Done using toggling the type attribute of the input. Check this http://jsfiddle.net/RZm5y/16/
Try This :
In HTML and JS :
// Convert Password Field To Text On Hover._x000D_
var passField = $('input[type=password]');_x000D_
$('.show-pass').hover(function() {_x000D_
passField.attr('type', 'text');_x000D_
}, function() {_x000D_
passField.attr('type', 'password');_x000D_
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
<!-- An Input PassWord Field With Eye Font-Awesome Class -->_x000D_
<input type="password" placeholder="Type Password">_x000D_
<i class="show-pass fa fa-eye fa-lg"></i> <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>
Try this see if it works
In one line of code as below :
<p> cursor on text field shows text .if not password will be shown</p>_x000D_
<input type="password" name="txt_password" onmouseover="this.type='text'"_x000D_
onmouseout="this.type='password'" placeholder="password" />Source: Stackoverflow.com