35

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

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

それで、あなたの誰かがこれについて何か意見を持っていますか？
私はAndroid、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アプリ：SafariでJavaScriptを使用して仮想キーボードを検出しますか？...しかし、この継ぎ目はIOSでのみ機能します-ブラウザについてはよくわかりません。

4

6 に答える 6

22

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

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

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

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

于 2012-11-12T08:02:13.323 に答える
8

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

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

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

于 2012-11-15T21:48:50.820 に答える
3

2017年11月20日の時点で、Chrome / Safariなど、AndroidとiOSの両方で機能する最も優れたソリューションは、高さ単位（ビューポートの高さ）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);
});
于 2017-11-20T16:20:42.007 に答える
1

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

これはjqueryを使用する素敵な小さなスクリプトです

モバイルでない場合は、標準の入力フィールドを表示します。

モバイルの場合は、入力フィールドを表示せず（したがって、仮想キーボードを取得しません）、代わりに、ピンパッドのボタンをクリックしたときにjqueryで更新される非表示のフィールドまたはリストを用意します。

于 2012-11-12T01:07:13.913 に答える
0

先日、新しい質問と、キーボードの問題に役立つ可能性のあるすばらしい回答に出くわしました。

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

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

$(document).ready(function() {

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

    var touchPresent = hasTouch();
});
于 2012-11-17T11:56:17.737 に答える
0

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

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

データベース（xmlファイル）は定期的に更新され、公式APIはjava、php、および.netで利用できます。

于 2012-11-18T11:42:50.483 に答える