Ngăn yếu tố <input> di chuyển màn hình trên iPhone?

Question

Tôi có một số yếu tố <input type="number"> trên trang web của mình. Tôi đang sử dụng jQTouch và tôi luôn cố gắng giữ nguyên chế độ toàn màn hình; nghĩa là cuộn ngang là xấu. Bất cứ khi nào tôi nhấp vào một phần tử <input>, trang cuộn sang phải, hiển thị đường viền màu đen ở bên phải màn hình và bỏ định tâm mọi thứ. Các đầu vào được bù đắp từ bên trái của màn hình, và chúng bắt đầu ở đâu đó ở giữa trang.

Làm cách nào để ngăn cuộn này được lấy nét?

Answer 1

Tôi chỉ tìm thấy giải pháp cho vấn đề này trong bài viết này Stop page scrolling from focus

Chỉ cần thêm onFocus="window.scrollTo(0, 0);" đến lĩnh vực đầu vào của bạn và bạn đã hoàn tất! (Đã thử nó với <textarea> và <input type="text" /> trên iPad, nhưng tôi khá chắc chắn nó cũng sẽ hoạt động trên iPhone.)

Tôi sợ việc cuộn sẽ hiển thị dưới dạng nhấp nháy hoặc gì đó, nhưng may mắn thay đó là không phải vậy!

Answer 2

đây là cách tôi giải quyết này trên iPhone (di động Safari) (Tôi sử dụng jQuery)

1) tạo một biến toàn cầu chứa vị trí cuộn hiện nay, và được cập nhật mỗi khi người dùng cuộn viewport

var currentScrollPosition = 0; 
$(document).scroll(function(){ 
    currentScrollPosition = $(this).scrollTop(); 
}); 

2) liên kết sự kiện trọng tâm với trường nhập được đề cập. khi được lấy nét, hãy cuộn tài liệu đến vị trí hiện tại

$(".input_selector").focus(function(){ 
    $(document).scrollTop(currentScrollPosition); 
}); 

Ta Da! Không gây phiền nhiễu "cuộn trên tiêu điểm"

Một điều cần ghi nhớ ... đảm bảo rằng trường nhập là TRÊN bàn phím, nếu không bạn sẽ ẩn trường. Điều đó có thể dễ dàng giảm nhẹ bằng cách thêm một mệnh đề if.

Answer 3

Tôi khuyên bạn nên sử dụng phương thức jQuery.animate() linked to above, không chỉ window.scrollTo (0,0), vì iOS làm động các thuộc tính bù đắp trang khi phần tử đầu vào được tập trung. Gọi window.scrollTo() chỉ một lần có thể không hoạt động với thời gian của hoạt ảnh gốc này.

Để biết thêm nền, iOS đang làm động các thuộc tính pageXOffset và pageYOffset của window. Bạn có thể làm một kiểm tra điều kiện bằng các thuộc tính để đáp ứng nếu cửa sổ đã chuyển:

if(window.pageXOffset != 0 || window.pageYOffset != 0) { 
    // handle window offset here 
} 

Vì vậy, để mở rộng vào liên kết nói trên, đây sẽ là một ví dụ hoàn chỉnh hơn:

$('input,select').bind('focus',function(e) { 
    $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
}); 

Answer 4

Nếu tập trung được thiết lập theo chương trình, đây là những gì tôi sẽ làm:

Lưu giá trị scopTop của cửa sổ trước khi thay đổi tiêu điểm. Sau đó, khôi phục scrollTop về giá trị đã lưu ngay lập tức sau khi đặt tiêu điểm.

Nếu sử dụng jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position 
<code that changes focus goes here> 
$(document).scrollTop(savedScrollTop); // restore it 

Answer 5

Hãy thử điều này, tôi nghĩ rằng vấn đề là zoom:

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />