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