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

理想的には、ios(itouch/ipad)やAndroidキーボードに表示されている仮想キーボードに表示されるカスタムスタイリングを持つインターフェイス全体が必要です。詳細は以下を参照してください。

キーボードが「存在」している場合、カスタム設定のCSSハッキングルールをアクティブにすることも許容される解決策です。

Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside is: "fluid".

Edit: This was more design, then text; So the changes are not disorientating. At the lowest level, I just desire a design change with and without the virtual keys (Perhaps just a background change).

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

Hence the bounty: Despite no longer needing the answer for the project I was working on (an alternative design was used). I still believe this question can benefit from being answered.

Default Behavior

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

Desired Behavior

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |  /  | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+
55
どうして?あなたが入力しようとしているときに物事が消えてしまうのは面倒ですが、そのサイズを大きく変更すると、実際に読むのは難しくても不可能になるかもしれません。 (私はiOSが何をしているのかはわかりませんが、あなたのコンテンツをサイズ変更して読んだら、Android携帯には読みにくいでしょう)。これを縦向きと横向きの両方で行う予定ですか?ところで、素敵なASCIIアート。
追加された 著者 nnnnnn,
+ nnnnnは何を言ったか。ユーザーはこの動作を期待せず、理解できません。それはそのままです。
追加された 著者 Ryan Shillington,
あなたの究極の目標はユーザーフレンドリーなUIなので、私はあなたがそれを複雑にするのではなく、慣れ親しんだままにすることをお勧めします。
追加された 著者 blackpla9ue,
@nnnnnnその流体レイアウト、それはテキストフォントのサイズを変更しません(同じまま)...ちょうど私は2つの別の入力ボックス(上部と下部)を見直しの両方になるために、再配置する必要があります。しかし、関係のない中心のコンテンツは、おそらく、隠されてしまうでしょう。肖像画と風景の両方のために(実際には肖像画だけが意味をなさないが)
追加された 著者 PicoCreator,
@RyanShillington:流体レイアウトは、領域全体がテキストであることを前提としていますが、残りは一行のテキスト入力であり、残りは更新されたサイズに反応する動的なバックグラウンドです(「どこにも行き渡りません」)。
追加された 著者 PicoCreator,
@ graverobber2まさに何を得ようとしているか)
追加された 著者 PicoCreator,
キーボードが見えるときにのみ表示される2番目のレイアウトを試すことができます
追加された 著者 Andreas,

4 答え

私は確信していません、これは望ましい効果ですか?このリンクをチェックする

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

更新

(1). Assuming its a website & running on device browser. Then we can check the presence of virtual keyboard by checking the screen size.

Check in device browser - http://jsfiddle.net/UHdCw/8/show/

code : - http://jsfiddle.net/UHdCw/8/

(2). If you are building native app with HTML5 & Phonegap, things will be different. Since there is no direct API hook to check the keybord status, we have to write our own plugin in Phonegap.

Androidでは、ネイティブコード[ここで確認を使用してキーボードの状態を表示/非表示を確認できます]。私たちのHTMLにそれらのイベントを取得するためにPhonegapプラグインを書かなければなりません。

[Phonegapは一例です。私はネイティブのフレームワークにhtmlのほとんどがネイティブコードとフックするこの種のフェリシティを持っていると思います]

iOSアップデート

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

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

19
追加された
私の更新をチェックしてください。
追加された 著者 Praveen Vijayan,
うーん、私はiOSでチェックしなかった。私のギャラクシーSでうまくいきました.iOSのためにそこを微調整することができます:)
追加された 著者 Praveen Vijayan,
恩恵をいただきありがとうございます:)
追加された 著者 Praveen Vijayan,
+1は試してみました:うん、キーボードがアクティブなときのカスタムスタイリング...また、複雑すぎないようにコンテンツを変更する方法の例もあります。画像はサイズ変更されます:テキストではありません...しかし、最も重要なポイント、アクティブなネイティブキーボードを検出する方法。 >。<(カスタムではない)
追加された 著者 PicoCreator,
ダン心配、それはちょうどウェブサイトとデバイスのブラウザ...そして、いいえ、それはブラウザがサイズ変更されていない原因、iOS上で仕事をしなかった、全体のチャンクは上にシフトされます。これはレイアウトの変更を防ぎますが、サイズ変更の検出を防ぎます...どちらがすてきなアイデアでしたか= D私は正直なところ、うまくいくと思って、それが理にかなっていると感じました。
追加された 著者 PicoCreator,
うん、私のノートでうまく動作する、> _>笑少なくともそれは進歩です
追加された 著者 PicoCreator,
一緒に混ぜると十分なハックのように見える。 =)あなたは探検の努力のために恩恵を受けます。
追加された 著者 PicoCreator,

私は同じ問題に直面した、これは私のために働く:

<!-- 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> 
11
追加された
これはどのように機能しますか?私が理解していれば、ドキュメントがロードされたときにメタタグが書き込まれます。つまり、ユーザーが要素をフォーカスしてページロード後にキーボードを開いた場合、問題が発生するはずです。
追加された 著者 Yuki,
これはすべてのブラウザで機能しますか?
追加された 著者 NeiL,

入力要素に 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; }
}

この組み合わせにより、携帯電話でキーボードが上がっているときにページを整形できます。ありがとうございました。

7
追加された

私は正確な問題を抱えています。これまでの私の解決策は、誰かがアップルでテストできるかどうか分かりました。 http://jsfiddle.net/marcchehab/f2ytsu8z/show (ソースコードとすべてを表示するには: http://jsfiddle.net/marcchehab/f2ytsu8z

次のようにキーボードが切れているかどうかを検出します:ロード時に$(ウィンドウ).width()+ $(ウィンドウ).height()の変数 "sumedges"を計算します。次に、$(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を使用して、入力をクリックしてキーボードが飛び出すと、スムーズな遷移を強制する方法が見つかりませんでした。 しかし、システムを騙すことは可能かもしれません:フィドルでは、私は偽の入力(青)を設定します。あなたがそれをクリックすると、実際の入力が私のディスプレイ(黄色)のすぐ下に現れ、選択されます。この方法で、Android上のChromeですべてがスムーズに見えます。もう一度、皆さんがテストできるのであれば、私は感謝しています。

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

$("#realinput input").blur(function(){
    $("#realinput").hide();
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript