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 (required) (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 (default) (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 規則。