你有沒有發現，有些網站在手機上填表單時特別順？
不管是輸入電話、金額還是郵遞區號，
畫面都會自動跳出對應的鍵盤：
數字欄位是整排數字鍵、Email 欄位直接出現小老鼠符號、
連網址欄位都貼心地幫你準備好「.com」。
而有些網站呢？
明明只是要輸入一串數字，卻跳出滿滿的英文字母鍵盤。
輸到一半還得切換、刪除、再重打，
體驗差到讓人懷疑是不是被網站惡意整。
這其實不是手機的問題，也不是你打太快，
而是網站少了一個小小的設定：inputmode。
什麼是 inputmode？
(▲ 各版本支援度:caniuse)
inputmode 是一個看似低調、卻超級實用的 HTML 屬性。
它的任務很單純：告訴瀏覽器「該出現什麼鍵盤」。
簡單說，它不是在控制「你能輸入什麼」，
而是在提示「手機應該幫你準備什麼樣的鍵盤」。
比方說：
| 情境 | 建議設定 | 手機畫面 |
|---|---|---|
| 輸入電話號碼 | inputmode="tel" |
跳出數字鍵盤 |
| 輸入金額或數量 | inputmode="numeric" |
顯示純數字鍵 |
| 輸入小數點金額 | inputmode="decimal" |
顯示含小數點鍵盤 |
| 輸入 Email | inputmode="email" |
顯示含 @ 的鍵盤 |
| 輸入網址 | inputmode="url" |
顯示含 .com 的鍵盤 |
| 輸入搜尋文字 | inputmode="search" |
顯示搜尋符號鍵盤 |
不同欄位、不同鍵盤，原來鍵盤畫面差這麼多！
輸入電話號碼
在手機上輸入電話時，自動跳出數字鍵盤，提升速度與準確性。
可點圖片於新分頁查看放大圖
<input type="text" inputmode="tel" placeholder="請輸入電話號碼">
輸入金額或數量
顯示純數字鍵盤，適合購物、報價或統計類表單。
可點圖片於新分頁查看放大圖
<input type="text" inputmode="numeric" placeholder="請輸入數量">
輸入小數點金額
顯示含小數點鍵盤，適合輸入金額或需要精確數值的欄位。
可點圖片於新分頁查看放大圖
<input type="text" inputmode="decimal" placeholder="請輸入金額">
輸入 Email
鍵盤自帶「@」與「.com」符號，方便使用者輸入電子郵件。
可點圖片於新分頁查看放大圖
<input type="email" inputmode="email" placeholder="請輸入電子信箱">
輸入網址
鍵盤會出現「/」與「.com」，方便輸入完整網址。
可點圖片於新分頁查看放大圖
<input type="url" inputmode="url" placeholder="請輸入網址">
輸入搜尋文字
鍵盤右下角會顯示搜尋圖示，適合搜尋欄設計。
可點圖片於新分頁查看放大圖
<input type="search" inputmode="search" placeholder="搜尋關鍵字">
看起來只是鍵盤不同，但這些小細節正是使用者體驗的關鍵。
對一般使用者來說，少切一次鍵盤、多快一秒填完，
就有更高機率真的「送出表單」。
若是電話號碼欄位，也可以使用 type="tel" 搭配 inputmode="tel"，
這樣能讓手機在輸入電話時自動彈出數字鍵盤。
我之前也寫過一篇更完整的教學：👉
表單電話欄位輸入很麻煩？教你讓手機自動跳出數字鍵盤
網頁考古時間：那個被冷落十年的小屬性，現在翻紅了！
雖然有些開發者戲稱 inputmode 是「阿公級屬性」，
但實際上，它並不是很早期 HTML 就有的標準，
反而是一個「討論已久、被埋沒多年的新實用屬性」。
📜 技術演進小整理
- 2010 年左右：開始有開發者討論，原意是為行動瀏覽器提供「虛擬鍵盤提示」功能。
-
2012 年：Android 版 Firefox 曾短暫支援
inputmode，但幾個月後就移除。 - 接著它就消失在主流視野中，許多台灣工程師開玩笑地稱它為 「阿公級屬性」，意思是「老掉牙但沒人用」。
-
2018 年之後：隨著 iOS Safari、Android Chrome 等行動瀏覽器陸續支援，
inputmode終於進入標準 HTML 規範， 並在近幾年成為前端開發的最佳實踐之一。
📱 目前現況
現代主流瀏覽器（尤其是行動端）都已完整支援
inputmode，
通常會與
type="text"
搭配使用，用來最佳化手機鍵盤體驗。
而對工程師或設計師來說，
這也是打造專業行動版網站的一個基本功：
網站不只是「能填」，還要「好填」。
inputmode vs type=”number” 有什麼差別？
很多人第一次聽到 inputmode，都會問：「那我用 type="number" 不就好了嗎？」
聽起來很合理，對吧？
畢竟我們只想讓欄位出現數字鍵盤嘛。
但實際上，type="number" 和 inputmode="numeric"，完全不是一回事。
type=”number”：讓瀏覽器「驗證內容」
當你用 type="number" 時，瀏覽器會認為：
「這個欄位只能輸入數字。」
於是會自動加上上下箭頭、甚至會出現小數點或符號，
而且在某些手機上，鍵盤還會出現「+」「-」等符號。
對使用者來說，這反而可能更混亂。
比方說輸入「郵遞區號」或「驗證碼」時，
根本不需要那些符號，但卻被迫看到一堆額外按鍵。
inputmode=”numeric”：讓手機「顯示對的鍵盤」
反過來，inputmode="numeric"
不會限制你輸入什麼，它只是告訴手機要出現什麼鍵盤。
這讓你可以自由搭配使用各種 type。
<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="請輸入驗證碼">
這樣一來：
📱 inputmode=”numeric” 的三個特性
- 手機會跳出純數字鍵盤。
- 瀏覽器不會自動加上下箭頭。
- 你依然可以透過
pattern來自訂格式規則。
更重要的是：這樣寫在所有行動裝置上（iOS、Android）幾乎都能保持一致體驗。
| 差異 | type=”number” | type=”text” + inputmode=”numeric” |
|---|---|---|
| 限制輸入 | 只能數字（強制檢查） | 只改變鍵盤，輸入內容無限制 |
| 可以貼上字串數字 | 不可靠，貼上有空白會失敗 | 可貼上 |
| 可以用 pattern | 否 | 可以 |
| 控制項 | 內建上下箭頭遞增 / 遞減 | 無 |
| 適合情境 | 價格、數量等純數值欄位 | 信用卡、郵遞區號、電話、數字 ID 等 |
簡單一句話總結：
type="number"是「限制輸入內容」，inputmode是「引導輸入方式」。
為什麼 inputmode 也關乎 SEO 與轉換率？
有些人會想：「這不就只是個鍵盤樣式嗎？跟 SEO 有什麼關係？」
但事實上，表單體驗好不好，會直接影響轉換率與使用者行為指標，
而這些行為指標，又正是 Google 評估網站品質的關鍵。
使用者體驗（UX）與 Core Web Vitals
Google 的核心網頁生命力指標（Core Web Vitals）
不只是看速度、穩定度，還包含「互動性」與「可用性」。
如果你的網站在手機上輸入不順、欄位不好填、使用者在這個步驟離開或重整頁面，這些都會反映在跳出率與互動時間上。
當 Google 偵測到「有人進來卻沒完成互動」，就會認為這個網站體驗不佳，排名自然也不會太好。
行動端是主要流量來源
根據 Google 統計，
全球超過 71% 的搜尋流量來自行動裝置。
也就是說，
手機體驗的每個細節，
都可能是決定你能不能
留住潛在客戶
的關鍵差距。
你可能為網站做了漂亮的 RWD、寫了滿滿關鍵字、做了再多內容行銷，
結果卻輸在「表單輸入太麻煩」。
⚠️ 只要少了 inputmode，
使用者輸錯一次、嫌麻煩一次、放棄一次，
你就可能失去一次轉換。
行銷人最該懂的 UX 細節
很多行銷人只看「數據轉換率」，卻忽略「輸入體驗」這一段流程。
事實上，一個好的 inputmode 設定，就能讓使用者覺得「這網站懂我」，
心理上多一層信任與順暢感。
inputmode 最佳實踐與實際範例
1) 純數字（郵遞區號、會員編號、驗證碼）
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="6" placeholder="請輸入 6 碼驗證碼">
- inputmode=”numeric” 叫出純數字鍵。
- pattern、maxlength 做基礎前端限制；仍要做伺服器端驗證。
2) 金額／小數（如 1999.99）
<input type="text" inputmode="decimal" placeholder="請輸入金額，例如 1999.99">
- 用 inputmode=”decimal”，小數點鍵會就位。
- 避免 type=”number” 帶來的上下箭頭與格式困擾；真正的格式與邏輯（例如最多兩位小數）交給 JS 與後端。
3) 電話（手機、市話）
<input type="tel" inputmode="tel" placeholder="09xx-xxx-xxx">
- type=”tel” + inputmode=”tel” 在多數手機上能叫出理想鍵盤。
- 台灣市話記得在前端提示「含區碼」，或偵測後補提醒。
4) Email
<input type="email" inputmode="email" placeholder="name@example.com">
- 鍵盤含 @、.com 等常用鍵；仍以伺服器端驗證為準。
5) URL
<input type="url" inputmode="url" placeholder="https://example.com">
- 鍵盤會更偏向網址輸入，減少切換。
6) 搜尋框
<input type="search" inputmode="search" placeholder="搜尋關鍵字">
- 有些系統鍵盤會提供更貼近搜尋的行為（如專用送出鍵）。
小地雷＆測試清單
⚠️ 小地雷提醒：這些細節別忽略
- 不同手機／鍵盤 App 呈現略有差異： iOS、Android、第三方鍵盤外觀各不相同，但核心目標一致——減少切換、降低出錯。
-
type=”number” 非萬靈丹：
它是在「限制內容」，不是「指定鍵盤」。多用
type="text"+inputmode的組合。 -
記得搭配 autocomplete：
tel、email、one-time-code都能減少輸入負擔。 - 伺服器端驗證不可少： 前端再怎麼友善，都擋不住惡意或異常輸入。
- 實機測試： 至少測 iOS Safari、Android Chrome 各一支，再依 GA / LLM 分布補測主力型號。
