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