重要提示:此文档不适用于您当前选择的格式故事!
amp-inputmask
描述
为 AMP 表单中的输入提供输入掩码功能
必需的脚本
<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
(必填)
指定要应用于输入元素的掩码或多个掩码。
自定义掩码由以下字符组成,并且可以用空格分隔列出
掩码 字符 | 描述 |
---|---|
L | 用户必须添加一个字母字符 |
0 | 用户必须添加一个数字字符 |
A | 用户必须添加一个字母数字字符 |
C | 用户必须添加一个任意字符 |
l | 用户可以选择添加一个字母字符 |
a | 用户可以选择添加一个字母数字字符 |
c | 用户可以选择添加一个任意字符 |
9 | 用户可以选择添加一个数字字符。 |
\ | 反斜杠 \ 转义掩码中的下一个字符,使其成为文字字符。 |
_ | 掩码将自动插入一个空格字符 |
例如,此掩码输入将允许用户输入加拿大邮政编码。空格将自动为用户添加。
<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"
输入,其中包含带有-unmasked
附加的掩码输入的name
或id
属性。
在下面的示例中,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 规则。
您已经阅读过这份文档十几次,但它并没有真正涵盖您的所有问题? 也许其他人也有同感:请在 Stack Overflow 上联系他们。
转到 Stack Overflow 发现错误或缺少功能?AMP 项目强烈鼓励您的参与和贡献! 我们希望您能成为我们开源社区的长期参与者,但我们也欢迎您对您特别感兴趣的问题做出一次性贡献。
转到 GitHub