Bootstrap Show/Hide Toggle Password Input Field Example

By Hardik Savani June 17, 2023 Category : Bootstrap HTML jQuery

Sometimes, we may require to hide show password input field so, user can see what he written in password in register form or any other form. So, If you used Bootstrap framework then you can simply do it by using bootstrap-show-password.js plugin.

Bootstrap show Password plugin give us to good layout and with we can also custom set class when password hide or show. We can also set toggle hide show password input field.

In this full example i use bootstrap-show-password.js plugin for hide show password field. You can sole use this example simply by bellow small example.

Preview:

Example:

Read Also: How to Remove Empty or Null Values from Array in JQuery?
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Hide Show Password</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">
	<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" id="password" name="password" class="form-control" data-toggle="password">
		</div>
		<div class="form-group">
			<button class="btn btn-success">Submit</button>
		</div>
	</form>
</div>

<script type="text/javascript">
	$("#password").password('toggle');
</script>

</body>
</html>

Ok, you can copy bellow code and run in your machine OR also you can check demo by click on eye icon.

You can get more information about bootstrap-show-password plugin from here : Click Here.

Maybe It can help you...

Tags :
Previous

Laravel 5.3 - Form Input Validation rules example with demo
Next

Laravel 5 - Full Text Search Example using Scout and Algolia Packages

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares