Show hide Password in Input Box using Eye Button With javascript
HTML Code -
<div class="container" style="margin-top:100px">
<h2 class="text-center">Show hide Password in Input Box using javascript</h2>
<div class="row justify-content-center">
<div class="col-6">
<form style="margin-top:30px">
<div class="form-group">
<label>Password</label>
<div class="input-group" id="show_hide_password">
<input class="form-control" type="password" placeholder="Password">
<div class="input-group-append">
<a class="input-group-text" href=""><i class="fa fa-eye-slash"
aria-hidden="true"></i></a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
JavaScript HTML Code -
<!---Show hide Password functionality using jquery --->
<script type="text/javascript">
$(document).ready(function() {
$("#show_hide_password a").on('click', function(event) {
event.preventDefault();
if($('#show_hide_password input').attr("type") == "text"){
$('#show_hide_password input').attr('type', 'password');
$('#show_hide_password i').addClass( "fa-eye-slash" );
$('#show_hide_password i').removeClass( "fa-eye" );
}else if($('#show_hide_password input').attr("type") == "password"){
$('#show_hide_password input').attr('type', 'text');
$('#show_hide_password i').removeClass( "fa-eye-slash" );
$('#show_hide_password i').addClass( "fa-eye" );
}
});
});
// Show hide Password functionality using javascript
function showPassword(){
var pass = document.getElementById("password");
if (pass.type ==="password") {
pass.type = "text";
}else{
pass.type = "password";
}
}
</script>
Show hide Password in Input Box using CheckBox with Javascript
 |
HTML Code -
<div class="container" style="margin-top:20px">
<h2 class="text-center">Show hide Password in Input Box using CheckBox
with Javascript</h2>
<div class="row justify-content-center">
<div class="col-6">
<form style="margin-top:30px">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password"><br>
<input type="checkbox" name="password" onclick="showPassword()">
Show Password
</div>
</form>
</div>
</div>
</div>
JavaScript Code -
<!---Show hide Password functionality using jquery --->
<script type="text/javascript">
$(document).ready(function() {
$("#show_hide_password a").on('click', function(event) {
event.preventDefault();
if($('#show_hide_password input').attr("type") == "text"){
$('#show_hide_password input').attr('type', 'password');
$('#show_hide_password i').addClass( "fa-eye-slash" );
$('#show_hide_password i').removeClass( "fa-eye" );
}else if($('#show_hide_password input').attr("type") == "password"){
$('#show_hide_password input').attr('type', 'text');
$('#show_hide_password i').removeClass( "fa-eye-slash" );
$('#show_hide_password i').addClass( "fa-eye" );
}
});
});
// Show hide Password functionality using javascript
function showPassword(){
var pass = document.getElementById("password");
if (pass.type ==="password") {
pass.type = "text";
}else{
pass.type = "password";
}
}
</script>
Download Source Code -
1 Comments
How To Match Password And Confirm Password Using Jquery In Laravel
ReplyDeleteUsing Jquery, we can match password and confirm password in Laravel. Here you can see, we are using Jquery function and compare both ids of password and confirm password as well as pass message of password is matched or not..
For More Info:- How To Match Password And Confirm Password Using Jquery In Laravel