HTML5; Javascriptで物理キーボードの存在を検出する

Question

ユーザーが物理キーボードを持っているかどうかを検出する最も信頼性の高い方法は何ですか？

物理キーボードがないので、はundefined（nullの代わりに）となる可能性があります。しかし、仮想キーボードのために私はそうではないと思います。私はテストしませんでした。

私の目標はOnline Timerのinput[type='number']をユーザーがキーボードを持っていない場合はホイールピッカーで置き換えることです。

Answer 1

2つのアプローチがあります。

最初の方法は、マウスとキーボードの各イベントを聞くことです。マウスを持っているユーザは、キーボードを持つ可能性が高い。ウェブサイトに行くユーザーは、マウスを動かす可能性が高い。

2番目の方法は、ユーザーエージェントを調べてオペレーティングシステムが実行されていることを確認し、AndroidおよびiOSデバイスにキーボードがないことを前提とします。 Windows 8の場合、Windows 8はタブレットとデスクトップ/ノートブックの両方で動作するため、ユーザーエージェントがどのように役立つか分かりません。

私はむしろより洗練されたソリューションを持っています。

Answer 2

タッチスクリーンを検出して特別なウィジェットを表示する方がより信頼できます。アクセシビリティのためにあなたの気の利いたウィジェットでキーボードがまだ使えることを確かめてください。

Answer 3

これは、キーボード、マウス、およびタッチスクリーンを備えたMicrosoft Surfaceのようなデバイスでは、非常に面倒です。また、3つの入力モードをいつでも混在させることも、スタイラスのような別の入力方法を追加することもできます。

マイクロソフトでは、入力イベントを「ポインタイベント」として抽象化するアプローチを採用しています。このモデルhas been submitted to the W3C。これにより、入力を管理する傾向がわかります。

タッチが利用可能かどうかを確認して、—の場合は—の場合はユーザーがタッチ入力を少なくとも一部使用するという前提のもとで操作するのが便利です。これは、マウス/キーボードの機能性を損なう可能性があるにもかかわらず、完全に非友好的なものを排除するための設計上の決定につながる可能性があります。

具体的には、input[type=number]をカスタムコントロールに置き換える必要があるかどうかを厳密に見ていきます。ほとんどのタッチデバイスは合理的に現代的ですが、多くの場合、標準のHTML入力のカスタムでタッチに優しいバージョンがあります。

ネイティブコントロールがおそらく「すぐに」サポートしているアクセシビリティシナリオも念頭に置いてください。

カスタムコントロールを実装する場合は、他の入力メカニズムが存在するかどうかに関わらず、タッチフィーチャを検出し、カスタムコントロールを表示することをお勧めします。これは、カスタムコントロールが（少なくとも）タッチ/キーボード/マウスに優しいことを保証することを意味します。

ここに私の現在のタッチテスト（それは明日破ることができ免責事項とし、確かには、すべてのデバイス上でテストされていません）です：

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

Answer 4

あなたは、オペレーティング・システムをチェックして、キーボードの種類を判別できる可能性がありますまたは画面の寸法さえも考慮する必要があります。 Android、iOS、小さな画面のすべてのデバイスには、物理​​的なキーボードがない傾向があります。