js实现隐藏密码
隐藏密码的实现方法
在JavaScript中实现密码隐藏功能通常涉及切换输入框的type属性，使其在password（隐藏）和text（明文）之间切换。以下是具体实现方式：
基础HTML结构
<input type="password" id="passwordField">
<button id="toggleButton">显示密码</button>基础JavaScript实现
const passwordField = document.getElementById('passwordField');
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', function() {
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleButton.textContent = '隐藏密码';
} else {
passwordField.type = 'password';
toggleButton.textContent = '显示密码';
}
});添加视觉反馈
可以添加图标代替纯文本按钮，使用Font Awesome等图标库：
<input type="password" id="passwordField">
<button id="toggleButton">
<i class="fa fa-eye"></i>
</button>toggleButton.addEventListener('click', function() {
const icon = this.querySelector('i');
if (passwordField.type === 'password') {
passwordField.type = 'text';
icon.classList.replace('fa-eye', 'fa-eye-slash');
} else {
passwordField.type = 'password';
icon.classList.replace('fa-eye-slash', 'fa-eye');
}
});使用CSS美化
#passwordField {
padding: 8px;
border: 1px solid #ccc;
}
#toggleButton {
background: none;
border: none;
cursor: pointer;
padding: 8px;
}增强版实现（带延迟显示）
let timeoutId;
toggleButton.addEventListener('mousedown', function() {
passwordField.type = 'text';
timeoutId = setTimeout(() => {
passwordField.type = 'password';
}, 2000); // 2秒后自动隐藏
});
toggleButton.addEventListener('mouseup', function() {
clearTimeout(timeoutId);
passwordField.type = 'password';
});React组件实现
function PasswordInput() {
const [showPassword, setShowPassword] = useState(false);
return (
<div>
<input
type={showPassword ? 'text' : 'password'}
placeholder="输入密码"
/>
<button onClick={() => setShowPassword(!showPassword)}>
{showPassword ? '隐藏' : '显示'}
</button>
</div>
);
}这些方法可以根据具体需求选择使用，基础版本适合简单场景，而增强版则提供了更好的用户体验。
