0%

你可能不知道的阿公級屬性-inputmode

有開發經驗的前端工程師,在 input 應用上應該會知道的屬性,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
<input type="week">

原則上使用這些屬性大部分的狀況都可以應付,頂多就是再用 CSS 把簡陋的原生樣式優化。

但是有原則就有例外,使用者總是有令人想像不到的行為…

有原則就有例外,規則是用來打破的

本次工作上有一需求,輸入框的原始設定是數字類型,但使用者使用的裝置是 iPhone 手機,並且複製來源資料看起來是數字,在數字中包含空白字元,例如:

原本期待是這樣的數字 111222333444,但複製過來的卻是 111 222333444

此時因輸入框的類型為type="number" ,但貼上時有包含空白,所以被認為是字串,也因為型別不符,從 input 得到的值會變成空值,在驗證提示上就會顯示「必填」的提示文字,但使用者此時看到手機畫面在 input 其實已經輸入值了,卻跳出必填,會讓使用者產生混淆外,使用體驗上也不好。

貼上是數字,但實際上是字串。

用 iPhone 手機上複製數字並貼到輸入框,按下按鈕後,在 alert 中會是空值,

demo: https://codepen.io/hnzxewqw/pen/YzvJbNd

此時可以古老屬性 inputmode,其屬性是強迫表單在行動裝置上只顯示成什麼樣的鍵盤。

inputmode

inputmode 屬性歷史悠久,但直到最近才被兩個行動裝置的瀏覽器採用,主要為:

  1. Safari
  2. Chrome of Android

雖然上面沒有寫到 Chrome of iOS,但實際測試還是可以使用。只是屬性的部分特性無法在 iOS 上完整的呈現。

caniuse

資料來源 caniuse

介紹

與設定 type 的方式不同,此屬性是固定 type="text",但透過此屬性會讓手機顯示在 inputmode="對應類型" 所對應的鍵盤類型,也就是說會強迫限制在手機時,會址呈現什麼鍵盤。

1
<input type="text" inputmode="" /> <textarea inputmode="" />

屬性介紹

none

1
<input type="text" inputmode="none" />

如果不想手機螢幕上在選取到輸入框時出現鍵盤,可以使用 none。如果是 Android 手機,可以用 inputmode=noneAndroid 這樣在手機上就不會出現鍵盤,但在 iOS ㄋ 上還是會出現預設鍵盤,所以在 iOS 可能是一種重置的設定。

numeric

1
<input type="text" inputmode="numeric" />

最常見的 inputmode 設定值之一,非常適合只需要數字而不要字串的情境,像是:PIN、郵遞區號、信用卡…等。除此之外,還可以跟 max、min 以及自訂的 pattern 一起使用,在開發上更有彈性。

原生 type="number" 無法使用 pattern 屬性。

雖然可以使用 type="tel" 來呈現純數字的輸入方式,但真正的語意上不是很精確,縱使可以達到一樣的效果,但考量到不同裝置的關係,沒有很推薦使用 tel 來代替 number 的值。

1
<input type="text" inputmode="numeric" min="6" max="12" pattern="\d*" />

tel

1
<input type="text" inputmode="tel" />

別於原生的電話按鍵,在 Android 手機只會出現數字,iOS 還是顯示原生電話按鍵。原生電話按鍵除了 0 跟 1 外,按鍵除了數字還代表了其他英文字母,EX. 2 還可以輸入 ABC。

decimal

1
<input type="text" inputmode="decimal" />

鍵盤效果與 tel 幾乎相同,但把 +*# 按鈕換成小數點 .,此屬性對 iOS 會有影響,而對 Android 沒有,他只會使用 numeric 鍵盤。

email

1
<input type="text" inputmode="email" />

使用 type="email" 其實最重要的是想要直接輸入 @ 這個符號,但原生鍵盤給使用者其實沒有很好用,體驗也不夠友善,透過 inputmode="email" 它直接把 @. 帶入鍵盤體驗。但在 iOS 上的鍵盤可能在建議時會造成系統混淆。

url

1
<input type="text" inputmode="url" />

比原生 url 更方便的,可以使用單鍵附加 TLD (EX. .com 或是 .co.uk),以及在網址上常用的符號。而鍵盤上顯示的 TLD 會與使用者的所在區域或設定位置有關。

TLD 頂極域

1
<input type="text" inputmode="search" />

使用此屬性,iOS 上會顯示一個藍色 GO 按鈕,在 Android 上會顯示綠色 Enter 按鈕,都是代替原本的 return 按鈕。就跟我們想得使用者體驗一樣,讓使用手機或平板的使用者體驗更直覺。

Demo

參考資料