web-dev-qa-db-ja.com

仮想キーボードがアクティブなときの画面スタイル

理想的には、IOS（iTouch/iPad）に表示されるカスタムスタイリングをインターフェイス全体に持たせるか、Android仮想キーボードが存在する場合と同等です。参照してください。詳細は以下をご覧ください。

キーボードが「存在」しているときに、CSSハッキングルールをアクティブに設定するカスタム設定も受け入れられるソリューションです。

ウェブサイト（HTML/JavaScript/CSS）上のandroidとiosの両方をターゲットにします。また、内部のレイアウトは"fluid"。

編集：これは、テキストよりもデザインです。そのため、変更が混乱を招くことはありません。最下位レベルでは、仮想キーの有無にかかわらず設計変更が必要です（おそらく単なる背景変更）

これが良いか悪いデザインのアイデアであるかは議論の余地があります。しかし、私はその質問とは無関係だと感じます。そのようなエクスプロイトにはテキスト（ゲームやインタラクティブなメディアなど） 。

したがって賞金：私が取り組んでいたプロジェクトの回答が不要になったにもかかわらず（代替設計が使用されました）。私は今でも、この質問に答えることが有益だと信じています。

デフォルトの動作

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

望ましい動作

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+
javascriptandroidcssiosmobile
65
PicoCreator

よくわかりませんが、これが望ましい効果ですか？このリンクを確認してください

http://jsfiddle.net/UHdCw/3/

更新

（1）。そのWebサイトを想定し、デバイスブラウザーで実行します。次に、画面サイズを確認することにより、仮想キーボードの存在を確認できます。

デバイスブラウザでチェックインします- http://jsfiddle.net/UHdCw/8/show/

コード：- http://jsfiddle.net/UHdCw/8/

（2）。 HTML5とPhonegapを使用してネイティブアプリを構築する場合、状況は異なります。 keybordステータスを確認するための直接的なAPIフックがないため、Phonegapに own plugin を記述する必要があります。

Androidでは、ネイティブコード[ ここをチェック ]を使用してキーボードの表示/非表示ステータスを確認できます。HTMLでこれらのイベントを取得するには、Phonegapプラグインを作成する必要があります。

[Phonegapは一例です。ネイティブフレームワークへのhtmlのほとんどは、ネイティブコードでフックするこの種の優しさを持っていると思います]

iOSアップデート

あなたが言ったように、キーボードが存在するとき、高さ/位置に変化はありません。 1つのことができます。入力にフォーカスが移ったら、シュリンククラスを追加して要素サイズを小さくすることができます。次のリンクを確認してください。

http://jsfiddle.net/UHdCw/28/show/

21
Praveen Vijayan

私は同じ問題に遭遇しました、これは私にとってはうまくいきます：

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("Android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script>
14
benone

入力要素にfocusがある場合、JavaScriptにbodyにクラスを適用させます。

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

そして、@mediaクエリは、モバイルビューかどうかを判断します。

@media (max-width:550px) { 
    body.when-keyboard-showing .header { height:0; padding:0; }
}

この組み合わせにより、キーボードが起動しているときにモバイル上でページをスタイル設定できます。ありがとうございました。

11
redolent

正確な問題があります。これまでの私の解決策は、誰かがAppleでテストできるかどうか感謝しています： http://jsfiddle.net/marcchehab/f2ytsu8z/show （ソースコードとすべてを見るには： http://jsfiddle.net/marcchehab/f2ytsu8z ）

I次の方法でキーボードが外れているかどうかを検出します：ロード時に変数「sumedges」を計算します。これは$（window）.width（）です。 + $（window）.height（）。次に、$（window）.resize（）のイベントで比較します：合計$（window）.width（）+ $（window）.height（）が「sumedges」よりも小さくなった場合、それはキーボードがでる。これは、AndroidでChromeで動作します。このコードを簡単に調整して、好きなことを行うことができます。

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

JQueryを使用して、入力をクリックしてキーボードが飛び出すときにスムーズな移行を強制する方法が見つかりませんでした。 しかし、システムをだますことは可能かもしれません：フィドルでは、偽の入力（青）を設定します。クリックすると、実際の入力がディスプレイのすぐ下に表示され（黄色）、選択されます。このように、ここではChrome= Androidで滑らかに見えます。繰り返しますが、皆さんもテストしていただければ幸いです。

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});
0
Marc Chéhab