amp-inputmask

<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 (必要)

指定要套用至輸入元素的遮罩或多個遮罩。

自訂遮罩由以下字元組成，且可以空格分隔列出

例如，此遮罩輸入可讓使用者輸入加拿大郵遞區號。空格會自動為使用者新增。

<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 使用者必須輸入付款卡號碼。遮罩會自動新增空格來分隔數字，並支援 American Express 風格和 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" 輸入，其中包含遮罩輸入的 name 或 id 屬性，並附加 -unmasked。

在以下範例中，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 規則。