AMP
  • websites

amp-inputmask

Introduction

The amp-inputmask component enables input masks for form fields in AMP documents. Input masks automatically add formatting characters to user input, and prevent users from typing input that doesn't match the mask. For example, an input mask on a telephone field automatically adds special characters like (, ) and -, and users can type only the numbers needed while the mask prevents them from typing incorrect characters.

Setup

Import the amp-inputmask component in the header

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

amp-inputmask depends on the amp-form extension, so the amp-form script also needs to be added to the document.

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

amp-mustache isn't required to use amp-inputmask, but here amp-form uses it to render the submit-success message.

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

Basic usage

The mask attribute specifies the characters that users are allowed to input, and any special characters that can be automatically added by the mask. Here, the user may enter a Canadian postal code.

In the mask, L allows the user to enter an alphabetic character. 0 denotes a numeric character. _ is a literal space character. See the full mask specification at the amp-inputmask documentation

<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>

Removing nonalphanumeric characters

If the mask-output attribute is set to "alphanumeric", amp-inputmask will add a hidden input with only the alphanumeric characters from the original input. The default value is "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>
Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub