First, we'll create a simple form of authorization on which we will implement the function to show/hide the password:
<h1>Authorization</h1>
<form class="my-form">
<div class="form-group">
<label for="email">Enter e-mail:</label>
<input id="email" type="text" placeholder="E-mail" />
</div>
<div class="form-group">
<label for="password">Enter Password:</label>
<input id="password" type="password" placeholder="Password" />
</div>
<div class="form-group">
<a href="#" id="s-h-pass">Show password</a>
</div>
<div class="form-group">
<input id="enter" type="submit" value="Enter" />
</div>
</form>
Add a little style for at least some beauty:
<style>
body{
font-family:sans-serif;
font-size: 13px;
}
h1 {
text-align: center;
}
.my-form{
width: 300px;
margin: 0 auto;
}
.form-group {
padding: 5px;
}
.form-group label {
width: 105px;
display: inline-block;
}
.form-group input {
width: 165px;
padding: 5px;
}
#enter {
width: 100%;
}
</style>
The form is ready, looks quite tolerant, now we implement the function to show/hide the password by clicking on the corresponding link, for its work we need jQuery, we connect it as follows:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
You can connect jQuery in any convenient way for you. Now go to the implementation of the function show/hide the password in the form, it will look like this:
<script>
$( document ).ready(function() {
$('#s-h-pass').click(function(){
var type = $('#password').attr('type') == "text" ? "password" : 'text',
c = $(this).text() == "Hide password" ? "Show password" : "Hide password";
$(this).text(c);
$('#password').prop('type', type);
});
});
</script>
Let us examine it in more detail.
2 line - the script starts working after loading the page.
3 - a line, process pressing (click) on element s-h-pass, our link show/hide the password.
Lines 4-5 - in accordance with the current type of the password input field (text or password) we change the type of the password field to the opposite and output the text on the show/hide password button.
Line 6 - set the text to the show/hide button.
Line 7 - set the type of the field (text - show or password - hide).
General view index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>JQuery, add the ability to show/hide the password in the form</title>
<style>
body{
font-family:sans-serif;
font-size: 13px;
}
h1 {
text-align: center;
}
.my-form{
width: 300px;
margin: 0 auto;
}
.form-group {
padding: 5px;
}
.form-group label {
width: 105px;
display: inline-block;
}
.form-group input {
width: 165px;
padding: 5px;
}
#enter {
width: 100%;
}
</style>
</head>
<body>
<h1>Авторизация</h1>
<form class="my-form">
<div class="form-group">
<label for="email">Enter e-mail:</label>
<input id="email" type="text" placeholder="E-mail" />
</div>
<div class="form-group">
<label for="password">Enter password:</label>
<input id="password" type="password" placeholder="Password" />
</div>
<div class="form-group">
<a href="#" id="s-h-pass">Show password</a>
</div>
<div class="form-group">
<input id="enter" type="submit" value="Enter" />
</div>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#s-h-pass').click(function(){
var type = $('#password').attr('type') == "text" ? "password" : 'text',
c = $(this).text() == "Hide password" ? "Show password" : "Hide password";
$(this).text(c);
$('#password').prop('type', type);
});
});
</script>
</body>
</html>
Result:
You can still improve the form with the help of bootstrap and replace the link show/hide the password to the icon, I will give the full file code:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>JQuery, add the ability to show/hide the password in the form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#s-h-pass').click(function(){
var type = $('#password').attr('type') == "text" ? "password" : 'text',
c = $(this).html() == "<span class=\"glyphicon glyphicon-eye-close\" title=\"Hide password\"></span>" ? "<span class=\"glyphicon glyphicon-eye-open\" title=\"Show password\"></span>" : "<span class=\"glyphicon glyphicon-eye-close\" title=\"Hide password\"></span>";
$(this).html(c);
$('#password').prop('type', type);
});
});
</script>
</head>
<body>
<div class="container">
<h1>Authorization</h1>
<form class="my-form">
<div class="form-group">
<label for="email">Enter e-mail:</label>
<input id="email" type="text" placeholder="E-mail" class="form-control" />
</div>
<div class="form-group">
<label for="password">Enter password:</label>
<div class="input-group">
<input id="password" type="password" placeholder="Password" class="form-control" />
<div class="input-group-addon" id="s-h-pass"><span class="glyphicon glyphicon-eye-open" title="Показать пароль"></span></div>
</div>
</div>
<div class="form-group">
<input id="enter" type="submit" value="Enter" class="btn btn-success pull-right" />
</div>
</form>
</div>
</body>
</html>
Результат:
Have a nice work.