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 規則。