ngx-mask 在处理粘贴操作时会因空格提前终止匹配，导致“33 55”仅粘贴为“33”。本文介绍通过双掩码（||）语法实现兼容性粘贴，使输入自动过滤空格并保留全部有效数字。
ngx-mask 在处理粘贴操作时会因空格提前终止匹配，导致“33 55”仅粘贴为“33”。本文介绍通过双掩码（||）语法实现兼容性粘贴，使输入自动过滤空格并保留全部有效数字。
在使用 ngx-mask 限制最多 12 位纯数字输入（如 mask="999999999999"）时，一个常见但易被忽视的问题是：当用户从剪贴板粘贴类似 "33 55" 或 "123-456-789" 这类含分隔符的字符串时，库默认会在首个非匹配字符（如空格、短横线）处截断，结果仅保留 "33"，丢失后续数字。
根本原因在于 ngx-mask 的匹配机制——它按顺序逐字符比对模板，一旦遇到与当前掩码规则（如 9 表示数字）不匹配的字符（如空格），即停止解析，而非跳过无效字符继续匹配。
✅ 正确解决方案：使用双掩码（||）语法定义备选模式
ngx-mask 支持通过 || 分隔多个掩码，引擎会依次尝试匹配，优先采用最长成功匹配的结果。关键在于：第二个掩码应使用 0（强制占位符）替代 9（可选数字），从而提升匹配鲁棒性。
例如，将原始写法：
<input type="text" mask="999999999999">
替换为：
<input type="text" mask="000000000000||999999999999">
? 原理说明：
- 000000000000：要求严格 12 位数字，无占位符逻辑；粘贴 "33 55" 时，空格不匹配 0，但 ngx-mask 会自动忽略不可见/分隔符字符（包括空格、制表符、短横线等）并继续匹配后续数字，最终得到 "3355"；
- 999999999999：作为兜底方案，兼容纯数字输入；
- || 机制确保引擎先尝试更严格的 0 模式（触发过滤逻辑），失败时再回退到 9 模式。
? 实际效果验证（以 "33 55" 为例）：
- 输入 "33 55" → 自动过滤空格 → 显示 "3355"（长度 ≤ 12，完整保留）；
- 输入 "123-456-789012" → 过滤 - → 显示 "123456789012"（恰好 12 位）；
- 输入 "123 abc 456" → 过滤字母与空格 → 显示 "123456"。
⚠️ 注意事项：
- 0 模式虽增强粘贴容错性，但会禁用“部分输入占位”（如 000-000 中未填位置显示 _），若需占位符提示，请权衡 UX 需求；
- 确保 ngx-mask 版本 ≥ 15.0.0（推荐最新稳定版），旧版本对 || 的支持可能存在差异；
- 如需更精细控制（如仅允许空格、禁止其他符号），建议结合 (blur) 事件 + replace(/\D/g, '') 二次清洗，但双掩码方案已覆盖绝大多数场景。
总结：面对粘贴截断问题，无需重写指令或监听 paste 事件——利用 000000000000||999999999999 这一简洁双掩码，即可让 ngx-mask 智能过滤分隔符、保留全部有效数字，兼顾健壮性与开发效率。
