Razor项目密码输入框预填充、掩码显示及明文查看功能实现咨询

方案1：自定义掩码实现（兼容性最优，无浏览器兼容问题） #

完全绕开原生password类型的浏览器限制，所有逻辑自行控制，适合所有场景：

1. 视图模型无需额外配置，保持原有的密码字符串字段即可，不需要加[DataType(DataType.Password)]注解
2. Razor视图代码示例：

@* 以FTP主密码字段为例，其他密码字段复用相同结构即可 *@
<div>
    <label>主FTP密码</label>
    <input type="text" 
           name="MainFtpPassword"
           class="pw-input"
           value="@(string.IsNullOrEmpty(Model.MainFtpPassword) ? "" : new string('*', Model.MainFtpPassword.Length))"
           data-real-password="@Model.MainFtpPassword" />
    <button type="button" class="pw-toggle-btn">显示明文</button>
</div>

3. 页面添加原生JS逻辑（无需引入第三方库）：

// 处理密码切换逻辑
document.querySelectorAll('.pw-toggle-btn').forEach(btn => {
    const input = btn.previousElementSibling;
    let isMasked = true;

    // 切换明文/掩码
    btn.addEventListener('click', () => {
        const realPw = input.dataset.realPassword;
        if (isMasked) {
            input.value = realPw;
            btn.textContent = '隐藏密码';
        } else {
            input.value = realPw ? '*'.repeat(realPw.length) : '';
            btn.textContent = '显示明文';
        }
        isMasked = !isMasked;
    });

    // 同步用户手动输入的密码到真实值存储
    input.addEventListener('input', () => {
        if (!isMasked) {
            input.dataset.realPassword = input.value;
        } else {
            // 掩码状态下用户主动输入直接切明文，避免输入逻辑冲突
            isMasked = false;
            input.dataset.realPassword = input.value;
            btn.textContent = '隐藏密码';
        }
    });
});

// 表单提交前同步真实密码到输入框值，确保后端拿到正确数据
document.querySelector('form').addEventListener('submit', () => {
    document.querySelectorAll('.pw-input').forEach(input => {
        input.value = input.dataset.realPassword;
    });
});

该方案满足所有需求：

• 页面加载后有密码的字段直接显示对应长度的*，用户可直观判断是否已配置
• 支持点击切换明文查看、编辑
• 提交时会把真实密码传到后端，不需要特殊的"留空不更新"逻辑
• 完全基于服务端直出渲染，不需要AJAX请求

方案2：原生密码框强制赋值（实现更简单） #

利用JS绕开浏览器不回填password类型输入框值的默认限制，代码更简洁：

1. Razor视图代码示例：

<input type="password" 
       name="MainFtpPassword" 
       value="@Model.MainFtpPassword"
       class="native-pw-input" />
<button type="button" class="native-pw-toggle">显示明文</button>

2. JS逻辑：

window.addEventListener('DOMContentLoaded', () => {
    // 页面加载完成后强制给密码框赋值，绕开浏览器限制
    document.querySelectorAll('.native-pw-input').forEach(input => {
        input.value = input.getAttribute('value');
    });

    // 切换明文/掩码
    document.querySelectorAll('.native-pw-toggle').forEach(btn => {
        const input = btn.previousElementSibling;
        btn.addEventListener('click', () => {
            input.type = input.type === 'password' ? 'text' : 'password';
            btn.textContent = input.type === 'password' ? '显示明文' : '隐藏密码';
        });
    });
});

该方案使用原生浏览器的密码掩码能力，不需要自行处理输入掩码逻辑，内网环境下兼容性足够。

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