Input Mask：什么是、输入掩码与格式化

什么是 Input Mask？

Input Mask（输入掩码）是一种机制，用于确定输入数据的模式并在输入时自动格式化文本。用户只输入有意义的字符（数字、字母），系统自动添加分隔符：空格、连字符、括号、斜杠。这是与后处理（数据在输入完成后才格式化）的关键区别。

输入掩码解决了用户体验的三个问题。第一 — 认知负荷：用户无需记住数据格式并手动放置分隔符。第二 — 输入速度：自动添加分隔符并跳转到下一组字符可加快输入速度。第三 — 数据质量：掩码确保以统一格式收集数据，没有差异。

与在已输入数据的显示级别工作的 NSFormatter 格式化器不同，Input Mask 在输入级别工作：它控制每个输入的字符，并确定该字符在当前掩码位置是否允许。如果字符与掩码不匹配，将被拒绝或忽略。

根据 Apple UX 研究 (2024)，输入掩码对于用户以不熟悉格式输入数据的字段最为有效。例如，SNILS (000-000-000 00) 或 INN (000000000000) — 用户可能不知道确切数字位数或分隔符位置，掩码直观地显示正确格式。

输入掩码语法

掩码语法 在 InputMask 库中使用占位符字符和常量字符的组合。占位符确定每个位置允许的字符类型：0 或 9 表示数字，A 表示字母，_ 表示任意字符。常量字符是自动添加的分隔符：空格、连字符、括号、点、斜杠。

必需块和可选块

方括号 [0] 表示必需字符 — 用户必须在此位置输入数字。花括号 {0} 表示可选字符 — 如果用户跳过该块，掩码不会插入相应的分隔符。例如，日期的掩码 [00]{.}[00]{.}[0000]：如果用户未输入月份，日期后的分隔符也不会显示。

掩码词缀

常量字符 在方括号和花括号之外构成词缀 — 即使字段为空也始终显示。例如，在掩码 +7 ([000]) [000]-[00]-[00] 中，字符 +7、(、)、空格和连字符是词缀，用户无法删除。词缀帮助用户在开始输入之前理解预期的格式。

按用途分类的掩码类型

输入掩码 根据其设计的数据类型进行分类。每种类型都有自己的结构、组数和分隔符位置。正确选择掩码对用户体验至关重要 — 如果掩码不符合用户的期望，用户将删除自动插入的字符。

电话号码掩码

电话掩码 — 最常见的类型。俄罗斯号码格式化为 +7 ([000]) [000]-[00]-[00]，美国号码格式化为 +1 ([000]) [000]-[0000]。掩码必须支持不同位数的国家代码和城市代码。InputMask 库支持优先级掩码：如果第一个掩码不匹配（用户输入了其他国家的代码），则应用第二个掩码。

银行卡掩码

对于卡号，使用掩码 [0000] [0000] [0000] [0000]，每 4 位一组，组间用空格分隔。此外，还可以应用有效期掩码 [00]/[00] 和 CVV 码掩码 [000]。卡号掩码根据支付系统支持 16-19 位数字：Visa 和 Mastercard — 16 位，American Express — 15 位，Maestro — 12-19 位。

日期和代码掩码

日期掩码 使用格式 [00]{.}[00]{.}[0000]，分隔符为点或斜杠。对于 INN、SNILS 和其他标识符，使用专用掩码：INN — [000000000000]（12 位），SNILS — [000]-[000]-[000] [00]（11 位，带连字符）。对于验证码 — 根据长度使用 [0000] 或 [000000]。

在 Swift 中实现掩码

掩码的实现 在 Swift 中通过使用 InputMask 库设置 UITextFieldDelegate 代理来完成。该库提供 MaskedTextFieldDelegate 类，连接到文本字段并根据指定的掩码自动格式化输入。

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

对于电话号码的自动国家识别，请使用优先级掩码。MaskedTextFieldDelegate 支持掩码数组：应用第一个匹配的掩码。如果用户输入代码 +1，则应用美国格式；如果输入 +7，则应用俄罗斯格式。

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

对于带可选块的日期，使用花括号。如果用户只输入日，掩码显示为「21」。如果输入日和月 — 「21.07」。如果输入所有三个组成部分 — 「21.07.2026」。可选块使掩码具有适应性，不会强制用户输入他们不想提供的数据。

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

粘贴和删除处理

正确处理粘贴 — 实现输入掩码最复杂的方面之一。粘贴文本时（例如，从剪贴板粘贴卡号），库必须删除粘贴文本中的所有分隔符，仅提取有意义的字符，并将掩码应用于干净的数据。RedMadRobot 的 InputMask 通过 shouldChangeCharactersIn 方法自动完成此操作。

在粘贴格式化文本（带空格或连字符）时，库首先规范化数据：删除所有不符合掩码模式的字符，然后将掩码应用于规范化后的字符串。如果粘贴的文本包含不允许的字符（数字掩码中的字母），这些字符将被忽略。

掩码中的删除（退格键）处理需要特别注意。按下退格键时，掩码应删除最后一个有意义的字符，而不是常量分隔符。如果光标位于常量字符之后，退格键应跳过它并删除前一个有意义的字符。InputMask 通过输入字符栈实现此行为。

对于选择和替换文本，掩码必须正确处理用户选择部分文本并用新文本替换的情况。InputMask 库通过 MaskedTextFieldDelegate 中的 modifyString 方法支持此功能，该方法接收替换范围和新字符串。

掩码设计建议

掩码设计 从分析用户将如何输入数据开始。如果大多数用户熟记格式（电话号码），掩码应尽量简单 — 只有组之间的分隔符。如果格式不熟悉（SNILS、INN），掩码应更具信息性，包含词缀和标签。

避免过多常量字符的冗余掩码。掩码 +7 ([000]) [000]-[00]-[00] 在 10 个有意义的字符中包含 7 个常量字符 — 这是可以接受的。但带有用户不断跳过的多余分隔符的掩码弊大于利。如果您对格式不确定 — 使用自由输入。

对于国际应用程序，请考虑不同国家的数据格式可能不同。美国的电话号码格式为 +1 (XXX) XXX-XXXX，意大利为 +39 XXX XXX XXXX。使用优先级掩码根据代码自动识别国家，或者在输入号码前让用户选择国家。

根据 InputMask UX 测试，用户更喜欢在开始输入前显示格式（通过占位符或词缀）且不阻止字符输入的掩码。掩码应该是提示，而不是限制。如果用户输入了不符合掩码的字符，最好允许他们这样做，而不是在未解释原因的情况下阻止输入。