提姆寫程式

0%

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

發表於 分類於 Disqus：
指定在行動裝置上表單只要出現的鍵盤

有開發經驗的前端工程師，在 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

參考資料