jQuery clicks the show button to display the password in the password box
jQuery code:
$(document).ready(function() {
$('#pwd_show').click(function() {
var passwordInput = $('#password');
if (passwordInput.attr('type') === 'password') {
passwordInput.attr('type', 'text');
$('#pwd_show').html('隐藏');
} else {
passwordInput.attr('type', 'password');
$('#pwd_show').html('显示');
}
});
});HTML code:
<div class="form-group">
<input type="password" name="password" required id="password" placeholder="密码">
<button id="pwd_show" style="width: 20%; position: absolute; top: 0px; right: 0px; height: 40px;"> 显示 </button>
</div>Once the page has finished loading, we bind a click event to the button. When the user clicks the button, we first retrieve a reference to the password input field and check whether its current type is "password". If it is, we change its type to "text" so that the password becomes visible; simultaneously, we change the button's text to "Hide". If the password input field's type is not "password", we revert its type back to "password" and change the button's text to "Show". This way, every time the user clicks the button, we can toggle the visibility of the password input field.
