đầu vào textbox ẩn đằng sau bàn phím trên Android Chrome

Question

Tôi có một trang web di động của định dạng sau:

tiêu đề - biểu tượng vv - tuyệt đối vị trí

nội dung - cuộn, tuyệt đối vị trí

footer, 40px tuyệt đối vị trí

Khu vực nội dung có nhiều hộp nhập. Trên Chrome trên Android, nhấn vào hộp nhập ở cuối trang làm cho đầu vào không ở chế độ xem khi bàn phím mềm bật lên. Các trang không cuộn để thử và di chuyển hộp lên, nhưng không đủ để thực sự hiển thị. Nó kết thúc ẩn đằng sau chân.

Bất kỳ ý tưởng nào về cách sửa lỗi này? Điều này chỉ xảy ra trên Chrome-Android. Safari trên iOS và IE trên Windows Phone và các trình duyệt di động khác hoạt động tốt.

Answer 1

Tôi đã hy vọng cho một giải pháp CSS duy nhất, nhưng tôi không nghĩ rằng có một. Câu trả lời của Gaunt Face là một cách hay để làm điều đó. Thật không may trong trường hợp của tôi, điều này sẽ đòi hỏi một vài thay đổi và có khả năng phá vỡ tự động hóa trong số những thứ khác (kể từ khi url có #targets thêm vào nó).

Tôi đã giải quyết vấn đề này bằng cách thay đổi loại vị trí trong 2 trình xử lý nhấp chuột.

Tôi có trình xử lý nhấp chuột cho bất kỳ trường nhập/văn bản nào. Trong trình xử lý nhấp chuột đó, tôi thay đổi kiểu vị trí của div vùng chứa biểu mẫu thành tĩnh. Lưu ý điều này sẽ đẩy chân trang xuống cuối nếu trường vùng chứa có thanh cuộn. Điều này, trong trường hợp của tôi không phải là một vấn đề như khi bàn phím bật lên, chỉ có một vài lĩnh vực có thể nhìn thấy. Người dùng không thể nhìn thấy rõ ràng bất kỳ sự khác biệt nào.

Tôi có trình xử lý thứ hai khi người dùng nhấp vào trường nhập - trình xử lý nhấp chuột trang - nơi tôi khôi phục loại vị trí thành tuyệt đối, làm cho trang xuất hiện giống như trước đây.

Điều này có một hệ quả không mong muốn - Vị trí cuộn bị mất. Tôi cố định điều này bằng cách lấy bù đắp của trường đầu vào và gọi scrollTop trên div cha với bù đắp đó, do đó khôi phục lại vị trí.

Tôi đã xem một số câu hỏi về điều này nhưng không tìm thấy câu trả lời. Tôi hi vọng điêu nay se giup được ai đo.

Answer 2

Có một số cách bạn có thể giải quyết vấn đề này, giải pháp rõ ràng nhất là sử dụng javascript để đặt băm trên URL.

Bạn có thể xem ví dụ về đó ở đây: http://jsbin.com/emumeb/24/quiet Mã số: http://jsbin.com/emumeb/24/edit

Đối với một ví dụ hơi phức tạp hơn, nếu bạn có một tiêu đề cố định và chân trang, bạn có thể muốn sử dụng mục tiêu thay đổi giao diện của trang khi băm được đặt. Tùy thuộc vào bố cục của bạn, bạn có thể cần phải sáng tạo hơn một chút, bạn có thể đặt lớp trên cơ thể cho trạng thái tập trung và không tập trung và thay đổi giao diện người dùng tương ứng, nhưng bắt đầu trở nên khó khăn để duy trì trải nghiệm tốt điện thoại di động, máy tính để bàn vv

Heres một ví dụ http://jsbin.com/emumeb/30/quiet Code: http://jsbin.com/emumeb/30/edit

Rõ ràng đây là một cái gì đó chrome nên đối phó với chính nó (tương tự như UX iOS có), vì vậy tôi đã nêu ra một lỗi đối với Chrome - https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.

Answer 3

Nếu bạn sử dụng jQuery, bạn có thể sử dụng các mã như sau:

$('body').on('focusin', 'input, textarea', function(event) { 
    if(navigator.userAgent.indexOf('Android') > -1 && ...){ 
    var scroll = $(this).offset(); 
    window.scrollTo(0, scroll); 
} 
}); 

Mặc dù, các lỗi cần được giải quyết ngay bây giờ.

Answer 4

Tôi đã tìm thấy giải pháp CSS hoạt động rất tốt.

Bạn có thể thực hiện truy vấn css cho màn hình cửa sổ có độ cao 300px o ít hơn, đó là chiều cao màn hình chủ yếu của điện thoại với bàn phím phần mềm được hiển thị. Nó hoạt động rất nhanh và rất tốt. Ví dụ

@media screen and (max-height: 300px) { 

    #myinputtext{ 
     position: absolute; 
     top: 50px; 

    } 
} 

Answer 5

Thay đổi từ tuyệt đối vị để cố định vị nên khắc phục vấn đề. Vị trí tuyệt đối các yếu tố liên quan đến kích thước trang ban đầu trong khi tải trang (thêm một bàn phím co lại trang hiển thị). Cố định vị trí của phần tử đối với kích thước trang hiện tại, giữ phần tử phía trên bàn phím.

#myElement { 
    position: fixed; 
    bottom: 2em; 
} 

Answer 6

Tôi đã sử dụng scrollIntoView để giải quyết vấn đề này.

$ (document) .Trên ('tập trung', chọn, function() {

document.querySelectorAll ("selector") scrollIntoView();.

});

Answer 7

Tôi không thông minh như các bạn,

Vì vậy, tôi đã lấy người cai trị và đo kích thước màn hình điện thoại di động của mình. 2 Sau đó, đo kích thước bàn phím

Tôi nhận thấy rằng bàn phím chiếm 38% màn hình.

Vì vậy, tôi đặt một div ở chân và gọi nó là ếch trìu mến.

và tôi đã sử dụng mã này:

$('body').on('focus', 'input, textarea', function(event) { 
     var altura = $(window).height(); 
     var scrollp = parseInt(parseInt(altura)/100*38); 
     $("#divSapo").css("height",scrollp + "px"); 
     window.scrollTo(0,document.body.scrollHeight); 
    });