May 09, 2024 | jQuery Bootstrap HTML
Hello Dev,
Occasionally, we may need to enable users to toggle between showing and hiding their password input field contents, allowing them to view what they've typed in password fields on registration forms or other input forms. Fortunately, if you're using the Bootstrap framework, accomplishing this task is straightforward with the bootstrap-show-password.js plugin.
This plugin offers a well-designed layout and allows for custom class settings when toggling between hiding and showing the password. Additionally, it provides the functionality to toggle the visibility of the password input field.
In the following example, I'll demonstrate how to implement the hide/show password field feature using the bootstrap-show-password.js plugin. This example simplifies the process for you to incorporate into your project seamlessly.
Read Also: Animated Typewriter Effect for Your Text HTML Jquery Example Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Show Hide Password Source Code Example -- ItErrorSolution.com</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Show Hide Password Source Code Example -- ItErrorSolution.com</h1>
<form>
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" class="form-control">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#password').showPassword();
});
</script>
</body>
</html>
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"