web-dev-qa-db-ja.com

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

私はこれについてしばらく考えていましたが、どう対処すればよいかわかりません。ユーザーが仮想（ソフトウェア）キーボードを使用しているか、従来の（ハードウェア）キーボードを使用しているかを検出する方法はありますか？

新しいWindows Surfaceのカバーには独自のキーボードがあり、Android/iPadにはさまざまなBluetoothキーボードがたくさんあります。

それで、あなたはこれについて何か意見がありますか？
私はAndroidを目指しています、IOS＆Windows Tablet/Phone。

動機：（非常に主観的）

タブレット/スマートフォン用の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：Detect Virtual Keyboard Using JavaScript in Safari？ ...しかし、これは継ぎ目のみ= IOS-ブラウザについては不明。

javascriptjquerykeyboardvirtualtablet
34
andlrc

デフォルトのオンスクリーンキーボードを上書きすることは良い考えではないと思います。Janiが提案したものを使用することをお勧めします-仮想キーボードも適応します。

しかし、フィールドにフォーカスを合わせてresizeイベントとペアにするか、window.innerHeight（または他の[az] * Height）を監視して、前と前の値を比較することで、ほとんどのキーボードを検出できると確信しています。フィールドフォーカス後。

これは特徴検出の奇妙なケースなので、十分な実験が必要になります。私があなただったら、私はそれをしません。

8
naugtur

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

HTML5フォーム属性を使用して、さまざまなタイプのキーボードをトリガーできます。例えば、 <input type="email">、<input type="number">および<input type="tel">は、iOSで適切なキーボードタイプをトリガーします（Android/WinPho /その他については不明ですが、同じように動作すると思います）。ユーザーがデータをより簡単に入力できるようにします。

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

ブラウザースニッフィングを使用してモバイルブラウザーを検出できますが、それらがBluetoothキーボードなどを引き続きサポートできることを忘れないでください。さらに、スニッフィングには、ほぼ確実に一部のブラウザーを見逃し、他のブラウザーを誤って検出するという問題があるため、それだけに依存するべきではありません。

21
Jani Hartikainen

Chrome/Safariなど、およびAndroidおよび2017年20月11日現在のiOSの両方）で機能する最も優れたprofソリューションは、divにはvh高さの単位（ビューポートの高さ）があります

次に、入力/テキストエリアのぼかし/フォーカスの変更時に、その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);
});
3
TBE

先日、新しい質問に出くわしました。キーボードの問題に役立つかもしれない素晴らしい答えです。

jqueryホバー（タッチ）でタイムアウト

基本的に、タッチイベントを作成できた場合はブール値を返すJQuery関数を使用します。

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return true;
        } catch (e) {
           return false;
        }    
    }

    var touchPresent = hasTouch();
});
1
Malkus

[〜＃〜] wurfl [〜＃〜] は、要求側のデバイスの機能に関する多くの情報を提供するサーバーサイドフレームワークです。 wurfelを配置すると、アプリケーションは、最適化された出力/マークアップでさまざまなデバイス/デバイスグループにサービスを提供できます。

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

データベース（xmlファイル）は定期的に更新され、Java、php、.netの公式APIが利用可能です

1
Lukas Winzenried

キーボードを検出していない可能性があります。しかし、ユーザーがモバイルブラウザーを使用しているかどうかを検出してみます。ネイティブ仮想キーボードを備えたデバイスは、ほぼ満場一致でモバイルブラウザーで実行されます。

jqueryを使用する素敵な小さなスクリプトは次のとおりです

モバイルでない場合は、標準入力フィールドを提示してください。

それらがモバイルの場合、入力フィールドを表示しない（つまり、仮想キーボードを取得しない）場合は、ピンパッドのボタンをクリックしたときにjqueryで更新される非表示フィールドまたはリストを使用します。

1
Malkus