6

iOS では、 の div に含まれる te​​xtarea のposition: fixed場合でも、textarea にフォーカスがある場合、OS はそれが表示されるようにします (これは、ブラウザー ウィンドウ全体を上にスライドさせることを意味する場合があります) ため、textarea はキーボードによって隠されません。

Android ブラウザー (私は 2.3 と 4.0 の両方でストック ブラウザーと 4.0 の Chrome をテストしました) では、これは起こりません。テキストエリアはキーボードで覆われ、ユーザーは自分が何を入力しているかを見ることができません。

Android のみの一時的な回避策として、確実に表示されるように設定position: fixedしtextarea:focusて画面の上部に移動します。

レイアウトの整合性を維持する、より洗練されたソリューションはありますか?

jsfiddle でちょっとした例を作りました。私の意味を確認するには、Android ブラウザで表示してください: http://fiddle.jshell.net/5cvj5/show/light/

4

2 に答える 2

7

私が最終的に行ったこと、および Facebook が同じ課題を克服するために行ったことは、フォーカスを受け取ったときにテキストエリアの下にスペーサー ブロック要素を追加し、ビューの一番下までスクロールすることでした。

var android_spacer = $('<div/>', {
    'class' : 'android_spacer'
}).css({
    'width'  : '100%',
    'height' :  '200px'
}).appendTo($('#parent_view'));

$('#the_textarea').on('focus', function() {
    $(this).after(android_spacer);
});

$('#the_textarea').on('blur', function() {
    $('.android_spacer').remove();
});

一度に画面上に表示されるスペーサーは 1 つだけであることに注意してください。

于 2013-01-18T18:43:32.547 に答える
1

フッターの位置を絶対に設定し、下部を0に設定するだけで、これで処理されます

于 2016-02-25T14:01:18.700 に答える