đầu vào trên tiêu điểm hoặc phím tab được bấm, di chuyển đến giữa màn hình

Question

Tôi có một số trường biểu mẫu trải rộng trên trang gấp. Khi nhấn phím "tab" để duyệt qua từng trường nhập/chọn, trường sẽ nằm ở trường tiếp theo ở cuối trang gấp.

Một vài trường của tôi có mẹo công cụ, phản hồi xác thực và hộp đề xuất tự động xuất hiện bên dưới trường. Khi tabbing vào trường, bạn không thể thấy các phần tử này bên dưới trang gấp.

Có tập lệnh javascript hoặc jQuery nào có thể xoay dọc giữa màn hình xung quanh trường đầu vào/textarea/select/button tập trung thay vì căn chỉnh ở dưới cùng không?

Answer 1

Bạn chỉ có thể liên kết với sự kiện lấy nét và sau đó tính toán độ lệch của trường và căn giữa nó trên màn hình.

$(':input').focus(function(){ 
    var center = $(window).height()/2; 
    var top = $(this).offset().top ; 
    if (top > center){ 
     $(window).scrollTop(top-center); 
    } 
}); 

Answer 2

điều dễ nhất sẽ bao gồm các jQuery ScrollTo plugin và jQuery Viewport plugin.

Sau đó, bọc mọi đầu vào + các yếu tố khác có liên quan (phản hồi xác thực, ....) trong div.

Kiểm tra tiêu cự nếu div hiển thị hoàn toàn, nếu không sử dụng scrollTo. Làm xong.

Tất nhiên đây là một chút sưng húp nhưng nếu bạn có thể sống với 2 phụ thuộc và thêm ~ 4kb, điều này sẽ hoạt động mà không tự mình thực hiện các phép tính.

Answer 3

Same từ trên cao với hiệu ứng cuộn mịn

$(':input').focus(function() { 
     var center = $(window).height()/2; 
     var top = $(this).offset().top; 
     if (top > center) { 
      $('html, body').animate({ scrollTop: top - center }, 'fast');    
     } 
    });