SSN输入框开发需求：仅显示后四位+显示/隐藏切换功能

下面是完整的实现方案，满足默认仅显示最后四位、支持显示/隐藏完整SSN的需求，同时处理了SSN的格式化输入：

完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSN Input with Toggle</title>
    <style>
        .ssn-container {
            position: relative;
            display: inline-block;
        }

        .ssn-input {
            padding-right: 30px;
            font-size: 1rem;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 180px;
        }

        .toggle-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div class="ssn-container">
        <input type="password" id="ssnInput" class="ssn-input" placeholder="Enter SSN">
        <button id="toggleBtn" class="toggle-btn" aria-label="Toggle SSN visibility">👁️</button>
    </div>

    <script>
        const ssnInput = document.getElementById('ssnInput');
        const toggleBtn = document.getElementById('toggleBtn');
        let isVisible = false;
        let rawSsn = ''; // 存储原始完整SSN数字

        // 处理输入：过滤非数字+自动格式化
        ssnInput.addEventListener('input', (e) => {
            const inputValue = e.target.value.replace(/\D/g, '');
            rawSsn = inputValue;
            updateDisplayValue();
        });

        // 更新输入框显示内容
        function updateDisplayValue() {
            let displayValue = '';
            if (!isVisible && rawSsn.length >= 4) {
                // 默认掩码模式：只显示最后四位
                displayValue = '****-**-' + rawSsn.slice(-4);
            } else {
                // 显示完整格式化SSN
                if (rawSsn.length > 0) {
                    displayValue += rawSsn.substring(0, 3);
                    if (rawSsn.length > 3) displayValue += '-' + rawSsn.substring(3, 5);
                    if (rawSsn.length > 5) displayValue += '-' + rawSsn.substring(5, 9);
                }
            }
            ssnInput.value = displayValue;
        }

        // 切换显示/隐藏状态
        toggleBtn.addEventListener('click', () => {
            isVisible = !isVisible;
            // 切换输入框类型与按钮图标
            ssnInput.type = isVisible ? 'text' : 'password';
            toggleBtn.textContent = isVisible ? '🙈' : '👁️';
            toggleBtn.setAttribute('aria-label', isVisible ? 'Hide SSN' : 'Show SSN');
            updateDisplayValue();
        });
    </script>
</body>
</html>

核心功能说明 #

• 默认掩码显示：输入时自动过滤非数字字符，默认仅展示最后四位，前六位用****-**替代
• 显示/隐藏切换：点击右侧按钮可切换完整SSN与掩码状态，同时切换输入框type属性（password/text）增强安全性
• 自动格式化：输入过程中自动添加SSN标准连字符分隔，提升输入体验
• 原始值独立存储：用rawSsn保存用户输入的完整数字，确保切换显示时能正确还原格式化后的完整内容

可选优化点 #

• 添加输入长度限制（最多9位数字），确保符合SSN格式规范
• 生产环境中需对SSN的传输、存储做加密处理
• 可补充输入验证提示，比如当输入长度不足9位时给出提示

内容的提问来源于stack exchange，提问作者Pankaj