HTML5; 在Javascript中檢測物理鍵盤的存在

Question

檢測用戶是否擁有物理鍵盤的最可靠方法是什么？

一個想法是，由於沒有物理鍵盤window.onkeydown可能是undefined （而不是null ）。 但由於虛擬鍵盤，我認為情況並非如此。 雖然我沒有測試。

如果用戶沒有鍵盤，我的目標是將在線計時器的input[type='number']替換為輪選擇器。

Answer 1

我看到兩種方法。

第一種方法是監聽每個鼠標和鍵盤事件。 擁有鼠標的用戶很可能也擁有鍵盤。 訪問網站的用戶很可能會移動鼠標。

第二種方法是檢查用戶代理以讀取正在運行的操作系統，並假設 Android 和 iOS 設備沒有任何鍵盤。 對於 Windows 8，我看不出用戶代理如何提供幫助，因為 Windows 8 可在平板電腦和台式機/筆記本電腦上運行。

不過，我寧願有一個更優雅的解決方案。

Answer 2

對於 Microsoft Surface 等配備鍵盤、鼠標和觸摸屏的設備，這會變得非常棘手。 您可以在任何給定時間混合所有 3 種輸入模式，或添加另一種輸入法，如手寫筆。

Microsoft 正在采用將輸入事件抽象為“指針事件”的方法。 該模型已提交給 W3C 。 這應該讓您了解管理輸入的趨勢。

盡管如此，我發現查看觸摸是否可用並在假設用戶至少在某些時候使用觸摸輸入的情況下進行操作是很方便的。 這可能導致設計決策消除完全不利於觸摸的東西，即使這可能意味着損害鼠標/鍵盤的功能。

在您的特定情況下，我會仔細研究您是否甚至需要用自定義控件替換input[type=number] 。 大多數觸摸設備都相當現代，並且許多具有標准 HTML 輸入的自定義、觸摸友好版本。

還要記住本機控件可能很好地支持“開箱即用”的可訪問性方案。

如果您決定實現自定義控件，那么我建議檢測觸摸功能並顯示您的自定義控件是否存在其他輸入機制。 這意味着確保自定義控件（至少）對觸摸/鍵盤/鼠標友好。

這是我當前的觸摸測試（免責聲明它明天可能會中斷，並且肯定沒有在每台設備上進行測試）：

var supportsTouch = ("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;

Answer 3

檢測觸摸屏並顯示特殊小部件更可靠； 為了可訪問性，只需確保鍵盤仍然可以與您喜歡的小部件一起使用。

Answer 4

您可以通過檢查操作系統甚至屏幕尺寸來確定鍵盤類型。 Android、iOS 和所有小屏幕設備往往沒有物理鍵盤。