Textarea trong trình duyệt Android ẩn bằng bàn phím

Question

Trong iOS, ngay cả đối với văn bản chứa trong div với position: fixed, khi vùng văn bản có tiêu điểm, hệ điều hành đảm bảo rằng nó hiển thị (đôi khi có nghĩa là trượt toàn bộ cửa sổ trình duyệt lên) sao cho textarea không bị ẩn bởi bàn phím.

Trong trình duyệt Android (Tôi đã kiểm tra trình duyệt chứng khoán ở cả 2.3 và 4.0 cũng như Chrome trong 4.0), điều này không xảy ra. Textarea được bao phủ bởi bàn phím và người dùng không thể thấy nội dung cô ấy đang nhập.

Là giải pháp tạm thời cho Android chỉ, tôi đặt position: fixed trên textarea:focus và di chuyển nó lên đầu màn hình để đảm bảo hiển thị.

Có giải pháp thanh lịch nào khác để duy trì tính toàn vẹn của bố cục của tôi không?

Tôi đã tạo một ví dụ nhỏ trong jsfiddle. Xem trong trình duyệt Android để xem ý tôi là gì: http://fiddle.jshell.net/5cvj5/show/light/

Answer 1

Điều tôi đã làm và những gì tôi thấy rằng Facebook thực hiện để vượt qua thử thách đó là thêm phần tử khối đệm bên dưới vùng văn bản khi nó nhận tiêu điểm và sau đó cuộn xuống cuối chế độ xem, như vậy:

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(); 
}); 

Lưu ý rằng mỗi lần chỉ có một lần nhấn trên màn hình.

Answer 2

Chỉ cần đặt vị trí của chân trang thành tuyệt đối và đặt dưới cùng là 0, điều này sẽ xử lý nó