如何实现SSN输入框明文与掩码值的点击切换功能？

你的核心需求是点击眼睛图标切换输入框显示掩码SSN或原始格式化SSN，而非依赖密码框的type属性隐藏内容。原代码存在两个关键问题：元素选择错误、逻辑方向不对（用type切换而非替换输入框值），以下是修正方案：

1. 后端代码优化（可选，简化掩码生成） #

原代码的掩码生成逻辑可以简化，同时保留你的SubstringCheck方法处理边界情况：

// OnPostSubmit方法中修改掩码生成部分
OutputSSN = $"{SubstringCheck(checkResult.SSNumber, 3)}-{SubstringCheck(checkResult.SSNumber, 3, 2)}-{SubstringCheck(checkResult.SSNumber, 5, 4)}";
// 直接替换最后4位为XXXX，无需重复调用Replace
OutputSSNMasked = $"{SubstringCheck(checkResult.SSNumber, 3)}-{SubstringCheck(checkResult.SSNumber, 3, 2)}-XXXX";

（注：原代码中先给OutputSSN和OutputSSNMasked赋值为原始SSN，再重新格式化，这里直接基于checkResult.SSNumber处理更清晰）

2. 前端代码修正（核心修改） #

输入框添加原始值存储 #

在输入框上通过data-original属性绑定原始格式化SSN，同时确保元素ID正确：

<form class="mt-0" method="post">
    <button class="btn btn-outline-dark col-1 offset-5" type="submit" id="SubmitBtn" name="SubmitBtn" value="Submit" disabled asp-page-handler="Submit">Submit</button>
    <!-- 添加data-original存储原始值，asp-for绑定掩码值 -->
    <input class="form-control" title="Social security number" readonly 
           asp-for="OutputSSNMasked" 
           data-original="@Model.OutputSSN">
    <i class="fa fa-eye-slash" id="ToggleOutputSSN" style="cursor: pointer;"></i>
</form>

修正JavaScript逻辑 #

修改元素选择器，切换时替换输入框的value而非type，同时切换图标类：

@section Scripts {
<script>
    const toggleBtn = document.querySelector('#ToggleOutputSSN');
    const ssnInput = document.querySelector('#OutputSSNMasked'); // 对应asp-for生成的ID
    const originalValue = ssnInput.dataset.original;
    const maskedValue = ssnInput.value;
    let isMasked = true; // 初始状态为显示掩码

    toggleBtn.addEventListener('click', function() {
        if (isMasked) {
            // 切换显示原始值
            ssnInput.value = originalValue;
            this.classList.replace('fa-eye-slash', 'fa-eye');
        } else {
            // 切换回掩码值
            ssnInput.value = maskedValue;
            this.classList.replace('fa-eye', 'fa-eye-slash');
        }
        isMasked = !isMasked;
    });
</script>
}

关键说明 #

• 用data-*属性存储原始值，避免额外添加隐藏输入框，更简洁
• 直接替换输入框的value而非修改type，完全匹配你的需求（显示不同文本内容）
• 用isMasked变量跟踪当前状态，确保切换逻辑准确

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