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 用户必须输入付款卡号。掩码会自动添加空格来分块数字，并且支持美国运通风格和 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 规则。