amp-inputmask

<script async custom-element="amp-inputmask" src="https://cdn.ampproject.org/v0/amp-inputmask-0.1.js"></script>

用法

amp-inputmask 启用 input 元素上的 mask 和 mask-output 属性。这些属性允许文档作者为其表单元素指定输入掩码。

输入掩码会自动向用户输入添加格式化字符，并阻止用户键入与掩码不匹配的输入。例如，电话字段上的输入掩码会自动添加特殊字符（如 (、) 和 -），用户只能键入所需的数字，而掩码会阻止他们键入不正确的字符。

支持的元素

• input[type=text]
• input[type=tel]
• input[type=search]

属性

mask（必需）

指定要应用于输入元素的掩码或掩码列表。

自定义掩码由以下字符组成，并且可以用空格分隔列出

例如，此掩码输入将允许用户输入加拿大邮政编码。空格将自动为用户添加。

<input mask="L0L_0L0" placeholder="A1A 1A1" type="text" />

此掩码允许用户输入 5 位或 9 位美国邮政编码。当用户键入第六位数字时，连字符将自动添加。

<input mask="00000 00000-0000" placeholder="10001" type="tel" />

此掩码接受北美电话号码。字符“+”、“1”、“ ”、“(”、“)”和“-”将在用户键入时自动添加。

<input type="tel" mask="+1_(000)_000-0000" placeholder="+1 (555) 555-5555" />

支持以下命名掩码

payment-card 用户必须输入支付卡号。掩码会自动添加空格来分隔数字，并支持 American Express 式和 Visa 式的分隔。

例如，此掩码输入将允许用户输入支付卡号。当用户键入时，将自动添加空格字符“ ”。

<input type="tel" mask="payment-card" placeholder="0000 0000 0000 0000" />

mask-trim-zeros

指定掩码将从粘贴到自定义掩码中的值中删除多少个零。为了向后兼容，默认值为 2。指定 0 以禁用此行为。

当用户从电子表格粘贴值时，左侧通常会有一个零填充。例如，北美电话号码有时存储为 015551112222，其中 1 是国家代码，但它已被零填充。mask-trim-zeros 属性将删除最多给定数量的零。mask-trim-zeros 属性不影响命名掩码

mask-output

指定表单如何提交输入值。

• raw（默认）：按原样输出值，包含所有特殊字符。
• alphanumeric：仅输出掩码中的字母数字字符。表单将添加一个 type="hidden" 输入，其 name 或 id 属性与 -unmasked 追加。

在下面的示例中，mask-output 输出属性设置为 raw。

<input
  mask="+\1_(000)_000-0000"
  mask-output="raw"
  name="phone"
  type="tel"
  placeholder="+1 (555) 555-5555"
/>

如果缺少 mask-output 属性，则默认值为 raw

<!-- missing `mask-output`, which is equivalent to `mask-output="raw"` -->
<input
  mask="+\1_(000)_000-0000"
  name="phone"
  type="tel"
  placeholder="+1 (555) 555-5555"
/>

当 mask-output 设置为 raw 时，表单将按原样提交 input 值。例如，如果输入包含 +1 (800) 123-4567，则表单将提交以下值

{"phone": "+1 (800) 123-4567"}

在此处，mask-output 输出属性设置为 alphanumeric。

<input
  mask="+\1_(000)_000-0000"
  mask-output="alphanumeric"
  name="phone"
  type="tel"
  placeholder="+1 (555) 555-5555"
/>

当 mask-output 设置为 alphanumeric 时，表单将按原样提交 input 值，并且表单将添加一个隐藏输入。隐藏输入将包含原始输入中的字母数字字符。其 name 将是原始输入的名称，并追加 -unmasked。例如，如果输入包含 +1 (800) 123-4567，则表单将提交以下值

{
  "phone": "+1 (800) 123-4567",
  "phone-unmasked": "18001234567"
}

验证

请参阅 AMP 验证器规范中的amp-inputmask 规则。