[Javascript] 仮想キーボードとハードウェアキーボードの検出


Answers

私は最良の方法は、HTML5のフォーム属性とオプションの仮想キーボードリンクを組み合わせることだと思います。

HTML5フォームの属性を使用して、異なるタイプのキーボードをトリガーすることができます。 たとえば、 <input type="email"><input type="number"><input type="tel">はiOS上で適切なキーボードタイプを起動します(Android / WinPho / otherについてはわかりませんが、同じことを想像してください)、ユーザーがデータをより簡単に入力できるようにします。

必要に応じて、HTML5に準拠していない古いモバイルブラウザのテキストフィールドの下にカスタムnumpadをトリガーするボタンを追加で提供することもできます。 新しいHTML5フィールドが標準のテキストフィールドとして表示されます。

ブラウザのスニッフィングを使用してモバイルブラウザを検出できますが、それでもブルートゥースキーボードなどの機能をサポートできることを忘れないでください。 スニッフィングには、ほとんどの場合、一部のブラウザが見付かりにくく、誤って他のブラウザを検出するという問題があります。したがって、それだけに頼るべきではありません。

Question

私は今これについて考えており、それに対処する方法を考え出すことはできません。 ユーザーが仮想(ソフトウェア)キーボードまたは従来の(ハードウェア)キーボードを使用しているかどうかを検出する方法はありますか?

新しいWindows Surfaceは、カバーに独自のキーボードを持ち、Android / iPad用には、数多くの異なるBluetoothキーボードがあります。

だから、これについて何かご意見はありますか?
私はアンドロイド、IOS&Windowsタブレット/電話を目指しています。

動機づけ:(非常に主観的な)

タブレット/スマートフォン用のWebアプリケーションを開発する際には、OSのソフトウェアキーボードの代わりにJavaScriptキーボードを使用する方が簡単なことが理解できました。

PINコードを入力したいとします。 画面の半分をキーボードで埋めるのではなく、

ソフトウェア(OS)キーボード:

|----------------|
|    [ input]    |
|                |
|----------------|
|  1  2  3  4  5 |
|  6  7  8  9  0 |
|----------------|

JavaScriptキーボード:

|----------------|
|    [ input]    |
|    | 1 2 3|    |
|    | 4 5 6|    |
|    |_7_8_9|    |
|                |
|                |
|----------------|

多くの入力を処理する必要がある場合は、入力とオーバーレイするdivを作成し、ソフトウェアキーボードを使用することができます。

|----------------|
| P1 P2    P3 P4 |
| [inp 1][inp 2] |
|----------------|
|    KEYBOARD    |
|                |
|----------------|

しかし、ユーザーが独自のハードウェアキーボードを持っている場合は、編集をインラインで行いたいと考えています。

私はSOを探していて、この記事を見つけました: iPad Web App:SafariでJavaScriptを使用して仮想キーボードを検出しますか? ...しかし、この縫い目はIOSでのみ動作する - ブラウザについてはわからない。




WURFLは、要求側のデバイスの機能に関する多くの情報を提供するサーバ側のフレームワークです。 wurfelを使用すると、アプリケーションは出力/マークアップを最適化したさまざまなデバイス/デバイスグループに対応できます。

最もシンプルなシナリオの1つは、デスクトップ、テーブル、スマートフォン間を区別することです。

データベース(XMLファイル)は定期的に更新され、公式APIはjava、php、.netで利用可能です




Chrome / Safariなどで、AndroidとiOSの両方で20 nov-2017の機能を果たす最も優れたプロポーザルソリューションは、高さの単位(ビューポートの高さ)を持つdivの高さの変化を検出することです

次に、入力/テキストエリアの任意のぼかし/フォーカスの変更で、そのdivがそのぼかし/フォーカスイベントの前に持っていたよりも30%少ない(ピクセル単位で)かどうかを確認します。

CSS:

#height-div{height: 10vh;}

jQuery:

$(document).ready(function() {
    var initialHeight = $("#height-div").height();//gives current height in pixels! We save it for later comparisons 
}

今ここに魔法があります:

$("input, textarea").focus(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});

$("input, textarea").blur(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});