Table of Contents
Introduction
Hello दोस्तों आज हम इस post में password को hide और show कैसे कर सकते है!. jquery के इस्तेमाल करके ये सब example के साथ समझेंगे!.
show and hide password using jquery
कई बार हम किसी HTML form में data fill-up कर रहे होते है! और उसमे password field में कुछ data fill-up करते है! तो वह HTML form में password हमेंशा के लिए bullet के format में ही होता है! क्योकि की password protected के लिए from में bullet symbol ही डिस्प्ले करेगा!.
लेकिन खास time में user को वह password visible हो सके ऐसा option चाहिए!.
जिसे की user को पता चल सके की वह password field में user कोनसे character, number या special character का इस्तेमाल करके password क्या set किया है!. तो उसके लिए password field के side में password
hide और show के लिए checkbox या button available होता है! जिसे user password को hide show करा सकते है!.
HTML form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<form method="post">
<div>
<label>Username:</label>
<input type="text" name="username" id="username">
</div>
<div>
<label>Password:</label>
<input type="password" name="password" id="password" />
<input type="checkbox" name="checkbox" id="showpassword">Show password
</div>
<button type="submit" id="submit" class="submit">Log In</button>
</form>
</div>
</body>
</html>
Jquery script
अगर script में jquery का इस्तेमाल करते है! तो उसके लिए jquery file या jquery को online link को attach करना जरुरी होता है!.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#showpassword').on('click', function(){
var inputype = $("#password");
console.log( inputype );
if(inputype.attr('type')==='password')
{
inputype.attr('type','text');
}else{
inputype.attr('type','password');
}
})
})
</script>
HTML form with jquery script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<form method="post">
<div>
<label>Username:</label>
<input type="text" name="username" id="username">
</div>
<div>
<label>Password:</label>
<input type="password" name="password" id="password" />
<input type="checkbox" name="checkbox" id="showpassword">Show password
</div>
<button type="submit" id="submit" class="submit">Log In</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#showpassword').on('click', function(){
var inputype = $("#password");
console.log( inputype );
if(inputype.attr('type')==='password')
{
inputype.attr('type','text');
}else{
inputype.attr('type','password');
}
})
})
</script>
</body>
</html>
