Bàn phím ảo Android che khuất các trường nhập trong ứng dụng web HTML5 dành cho thiết bị di động

Question

Tôi đang viết một ứng dụng web HTML5 dành cho thiết bị di động để chạy trên cả Apple và Android. Trên thiết bị Android tôi đang thử nghiệm, tôi gặp sự cố sau:

Tôi có hộp văn bản điều khiển web đầu vào nằm ở 50% màn hình thấp hơn. Khi tiêu điểm đi vào hộp văn bản, bàn phím mềm được hiển thị và che khuất/che phủ/ẩn điều khiển web đầu vào mà người dùng được cho là đang nhập vào. Chỉ khi người dùng nhập ít nhất một ký tự thì điều khiển web đầu vào sẽ hiển thị và không còn bị ẩn bên dưới bàn phím nữa.

Điều tôi muốn cho trường đang được nhập KHÔNG bị che khuất bởi bàn phím. Khi bàn phím mềm được hiển thị, tôi muốn điều khiển web đầu vào vẫn hiển thị.

Đây là trên máy tính bảng Samsung chạy phiên bản Android 3.2.

Hãy cho tôi biết cách thực hiện việc này.

Answer 1

Cách đơn giản nhất để giải quyết android (và bây giờ ios7 này) quá khó chịu là sử dụng các sự kiện lấy nét và làm mờ đầu vào. nếu bạn không thay đổi thẻ chân trang thành lớp.

Trong jQuery:

$("input").focus(function(){ 
    $('footer').hide(); 
}); 

$("input").blur(function(){ 
    $('footer').show(); 
}); 

Answer 2

thử một lần này trong tập tin CSS của bạn

html, body{overflow: hidden;} 

và cho tôi biết nếu có vấn đề xảy ra.

và một lần cố gắng thêm trong tập tin menifest cho hoạt động

android:windowSoftInputMode="adjustPan"