Add Show/Hide Password Toggle to Login Form
Appends a Show / Hide button beside the password field on the WordPress login page so users can reveal their password while typing.
JavaScriptby SnipCraft
js
(function () {
'use strict';
document.addEventListener('DOMContentLoaded', function () {
var pwField = document.querySelector('#user_pass');
if (!pwField) return;
var toggle = document.createElement('button');
toggle.type = 'button';
toggle.textContent = 'Show';
toggle.setAttribute('aria-label', 'Toggle password visibility');
toggle.style.cssText = [
'margin-left:8px',
'padding:2px 10px',
'cursor:pointer',
'font-size:13px',
'border:1px solid #8c8f94',
'border-radius:3px',
'background:#f6f7f7',
'color:#50575e',
'vertical-align:middle',
].join(';');
pwField.parentNode.insertBefore(toggle, pwField.nextSibling);
toggle.addEventListener('click', function () {
var isHidden = pwField.type === 'password';
pwField.type = isHidden ? 'text' : 'password';
toggle.textContent = isHidden ? 'Hide' : 'Show';
pwField.focus();
});
});
})();#javascript#login#password#users#ux