Do you want to show characters in the HTML password input field? Well! in this guide you will come to know how to display password characters rather than default dots. Besides this, we’ll also create a project to show/hide the password by clicking on an eye icon.
If you are working on a registration form project or working on the login page, then toggle view password is really a useful feature to implement into your project. This feature allows users to view their entered password in order to make sure that they have entered the correct password before sign up.
Before going further, you can check out the final output of this password toggle view project on the demo page. OK! let’s have look at how you can achieve this result.
How to Show Characters in Password Field?
It’s not only a question but also interesting thinking for making the logic for a solution. You might be asking yourself, how to show password characters in the HTML input field?
The quick answer is that you can show characters in the password field by changing the input type from “password” to “text”. You can manually do that by hand or programmatically using JavaScript. If you want to allow users to view their entered password, then the use of JavaScript is essential. So, how can you do that? Well! I am going to describe a way in which you can show password characters.
It might be right that you have already a password field on which you want to add a feature to show/hide password characters. Then, what you need to add in your password input? Here are two possible answers that depend on your project requirement. If you want to create only a function to display password characters rather than default dots for the password, then you just need a unique id of password input.
On the other hand, if you want to allow users to toggle (show/hide) a password, then you need to append an extra element along with your password input. This element can be a button, div or span (depends on your choice) that will be used to toggle the password. If it’s your project requirement, then the second part of this tutorial is fit on your needs.
Show Password Characters with Vanilla JavaScript
If you want a dependency-free function, then you can use vanilla/pure JavaScript to show characters in the password input. You just need to get your password input in your program and then change its “type” attribute. Suppose, your password input id is "myPass" then the JavaScript is as follows:
document.getElementById("myPass").setAttribute("type", "text");
Furthermore, you can wrap the above line into a function to execute on different events.
function viewPassword(){
document.getElementById("myPass").setAttribute("type", "text");
}
Now, you can run "viewPassword()" function on any JavaScript DOM events to show your password characters.
Show Password using jQuery
In the same way, jQuery (JavaScript library) allows you to change the password input type with the following syntax:
$("#myPass").attr("type", "text");
Complete Project to Show/Hide Password
Now, we’re going to build a complete project from scratch to allow users to view their entered password. For this purpose, we’ll place a password view (eye) icon inside the input field to toggle (show/hide) the password characters. A user can easily view the entered password by clicking on that icon.
So, load the Bootstrap CSS (optional) for ready-to-use styles and Font Awesome CSS for the icons by adding the following CDN links into the head tag of your HTML document.
<!-- Bootstrap CSS --> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'> <!-- Font Awesome CSS --> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
After that, create a form element with both email and password inputs (with the following mentioned classes) and wrap it into the following Bootstrap layout structure.
<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-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Here the important thing is only a password field and span element that will be used to toggle the password. You can skip the above HTML, and use the following structure in your project.
<input id="password-field" type="password" name="password"> <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
Define some basic CSS styles for the container. Leave some space from the top by defining the padding-top value as 50px and keep the margin auto to align it to the center. These styles for the container element are optional, you can define styles according to your needs.
.container{
padding-top:50px;
margin: auto;
}
The "field-icon" class is the wrapper of the icon. In order to keep this icon inside the input field, float it to the right, and define -25px value for both margin-left and margin-top. Similarly, specify the relative position and define 2 value for z-index to show this icon over the input field.
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
position: relative;
z-index: 2;
}
The Javascript
Finally, load the jQuery JavaScript library and password toggle function just before the closing of the body tag and done.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script>
$(".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");
}
});
</script>
That’s all! I hope now you are able to display password characters in the input field. If you have any questions or suggestions, feel free to comment below.