当前位置：首页 > JavaScript

js实现隐藏密码

2026-03-15 18:49:30JavaScript

隐藏密码的实现方法

在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等图标库：

js实现隐藏密码

<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>
    );
}

这些方法可以根据具体需求选择使用，基础版本适合简单场景，而增强版则提供了更好的用户体验。