H5身份证输入框需实现输入明文、展示脱敏，动态控制光标、兼容移动端软键盘与粘贴行为，并通过realValue保存真实值确保合规提交。
在 H5 页面中实现身份证号输入框的脱敏展示，核心是「输入时明文、展示时脱敏」，同时兼顾用户体验与合规性（如《个人信息保护法》要求最小必要原则）。关键不是简单用 * 替换，而是动态控制光标位置、避免失焦、兼容移动端软键盘行为，并防止复制粘贴破坏脱敏逻辑。
输入阶段保持明文，但实时监听并限制格式
身份证号为18位（末位可能是 X），需在输入过程中校验长度和基本格式，但不强制中断用户输入：
- 使用
<input type="text" inputmode="numeric">触发数字键盘，禁用type="idcard"（非标准且兼容性差） - 监听
input事件，对输入值做清洗：过滤非数字和非 X 字符，自动转大写 X - 长度超过 18 位时截断，不足时不补全，避免干扰用户手动编辑
- 不使用
blur或change延迟处理——脱敏必须在输入过程中即时响应，否则用户看到的是明文闪现
展示阶段动态脱敏，保留可读性与定位能力
脱敏不是全遮盖，而是「中间隐藏 + 两端可见」，典型格式为 110101********1234。重点在于：
- 显示层（如 placeholder、value 或自定义 span）只渲染脱敏后字符串，原始值始终保留在 JS 变量或
data-real-value中 - 避免直接修改
input.value，否则会重置光标位置；推荐用setSelectionRange手动维护光标 - 当用户点击/聚焦输入框时，可短暂还原完整值（可选），但失去焦点后立即恢复脱敏——需监听
focus和blur并加防抖
兼容移动端软键盘与粘贴行为
微信、支付宝等 WebView 对 input 事件支持不一，尤其在粘贴（paste）和长按选择时易出问题：
- 监听
paste事件，阻止默认行为，手动获取剪贴板文本、清洗后插入，并重置光标到末尾 - 安卓部分浏览器在输入中文模式下可能触发拼音字符，需在
input中额外过滤 \u4e00-\u9fa5 等 Unicode 中文范围 - iOS Safari 在
inputmode="numeric"下仍可能唤出带字母的键盘，建议加pattern="[0-9Xx]*"辅助校验
安全与体验兼顾的轻量实现示例
无需框架，纯 JS 即可完成：
const idInput = document.getElementById('id-card');
let realValue = '';
idInput.addEventListener('input', e => {
let v = e.target.value.toUpperCase().replace(/[^0-9X]/g, '');
if (v.length > 18) v = v.slice(0, 18);
realValue = v;
const masked = v.length >= 18
? v.slice(0, 6) + '****' + v.slice(14)
: v;
// 避免 value 被改写导致光标跳变
if (idInput.value !== masked) {
const pos = idInput.selectionStart;
idInput.value = masked;
idInput.setSelectionRange(pos, pos);
}
});
idInput.addEventListener('paste', e => {
e.preventDefault();
const paste = (e.clipboardData || window.clipboardData).getData('text');
const cleaned = paste.toUpperCase().replace(/[^0-9X]/g, '').slice(0, 18);
realValue = cleaned;
idInput.value = cleaned.length >= 18
? cleaned.slice(0, 6) + '****' + cleaned.slice(14)
: cleaned;
});
提交表单时，取 realValue 而非 input.value，确保传输真实值。
