show-hide password

How to Show/Hide a Password Using Jquery

It has always been an important part of any login/registration form to toggle the password field. That is, to show-hide password, when a user clicks on the show/hide button. The most conventional way to achieve this functionality is by using small jquery code. The most suitable functionality should be when the user clicks on the show-hide password button and holds the mouse button user should be able to view the text form of the password and on releasing the mouse button the password will again turn to hidden type.

This, however, works the same way on touch devices like mobiles and tablets the difference being, the user needs to tap and hold the show-hide password button to view the text form of the password and again on releasing the tap, password turns to hidden type. So, with that being said let us take a quick look at how we can achieve this functionality.

The Code


Firstly we would create a simple password field with which we will club the show/hide password button.

<div class="col-md-5 input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-lock" style="color: black;"></span></span> <input
type="password" class="form-control pwd" id="password"
name="PASSWORD"
style="width: 100%;"><span
class="input-group-btn">
<button class="btn btn-default reveal" id="view_button"
style="background-color: #dee7ef; height: 34px;border-color: #ccc;padding-left: 7px;"
type="button" data-toggle-password>
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</div>

Just a brief explanation on what we did above, we simply created a password field whose default state is hidden. Added to that we also have clubbed a show/hide password button. It is a good idea to note that the id of the button is view_button. The output is as follows:
show-hide password output

Next, we will have a look at the query code:


<script>

$(document).ready(function() {

$("#view_button").bind("mousedown touchstart", function() {
$("#password").attr("type", "text")
}), $("#view_button").bind("mouseup touchend", function() {
$("#password").attr("type", "password")
})
})

</script>

We placed the jquery code inside the ready() function since we need this piece of code to get ready once the page gets loaded. The logic is pretty simple, during mousedown/touchstart the password will be shown as text, however, on mouseup/touchend the password will return to hidden form.

That's it, I hope you learned something and enjoyed too. If you did, please share this post and comment below. Also, do not forget to check our other articles.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.