amp-inputmask

简介

amp-inputmask 组件为 AMP 文档中的表单字段启用输入掩码。输入掩码会自动向用户输入添加格式化字符，并阻止用户输入与掩码不匹配的输入。例如，电话字段上的输入掩码会自动添加 (、) 和 - 等特殊字符，用户只能输入所需的数字，而掩码会阻止他们输入不正确的字符。

设置

在标头中导入 amp-inputmask 组件

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

amp-inputmask 依赖于 amp-form 扩展，因此还需要将 amp-form 脚本添加到文档中。

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

使用 amp-inputmask 不需要 amp-mustache，但这里 amp-form 使用它来呈现 submit-success 消息。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

基本用法

mask 属性指定允许用户输入的字符以及掩码可以自动添加的任何特殊字符。在这里，用户可以输入加拿大邮政编码。

在掩码中，L 允许用户输入字母字符。0 表示数字字符。_ 是一个文字空格字符。有关完整的掩码规范，请参阅 amp-inputmask 文档

<form class="sample-form" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
  <label>Postal code: <input name="code" mask="L0L_0L0" placeholder="A1A 1A1"></label>
  <input type="submit">
  <div submit-success>
    <template type="amp-mustache">
      <p>You submitted: {{code}}</p>
    </template>
  </div>
</form>

删除非字母数字字符

如果 mask-output 属性设置为 "alphanumeric"，则 amp-inputmask 将添加一个隐藏输入，其中仅包含原始输入中的字母数字字符。默认值为 "raw"

<form class="sample-form" method="post" action-xhr="/documentation/examples/api/phone" target="_top">
  <label>Phone: <input name="code" type="tel" mask="+\1_(000)_000-0000" placeholder="+1 (555) 555-5555" mask-output="alphanumeric"></label>
  <input type="submit">
  <div submit-success>
    <template type="amp-mustache">
      <p>The raw value: {{code}}</p>
      <p>The unmasked value: {{code-unmasked}}</p>
    </template>
  </div>
</form>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @cvializ