jQuery - 自動輸入焦點時，滾動擊中某些元素

我使用jQuery插件Waypoints 來處理滾動操作。jQuery - 自動輸入焦點時，滾動擊中某些元素

我想要實現的是將焦點設置在視口中某個部分的第一個輸入元素上，並在向下滾動時將焦點移至下一個相應部分的輸入。而且，當滾回到上面的第一部分時，它應該將焦點設置回第一部分的輸入。

以下是我使用上述插件的實際工作設置。不幸的是，我無法真正將插件啓動並運行在我的JS Fiddle中。

此代碼塊在設置頁面加載焦點和向下滾動時將焦點更改爲目標輸入方面起作用但滾動回頂部部分不會將焦點設置回來。

(function($) { 

var firstInput = $('section').find('input[type=text]').filter(':visible:first'); 

if (firstInput != null) { 
    firstInput.focus(); 
} 

$('section').waypoint(function() { 
    var getFocus = $(this).find('input[type=text]').filter(':visible:first'); 
    getFocus.focus(); 
}); 

$('section').waypoint(function() { 
    var getFocus = $(this).find('input[type=text]').filter(':visible:first'); 
    getFocus.focus(); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

});

這是我JS Fiddle 不具有該插件的一部分。

只要有人能解釋他們應該如何在正常jQuery 如果不熟悉這個插件。

來源

2013-11-20 Seong Lee

只需添加插件作爲外部資源：http://jsfiddle.net/LX262/ – mplungjan

@mplungjan嗨，這是一個插件的CDN？我不知道CDN可用於相當不重要的插件。 –

不，這是來自作者示例頁面的js文件 – mplungjan

jQuery Waypoint非常簡單易用。我沒有你的代碼嘗試，但我得到了它與完成這件事：

$('input:first').focus(); 

$('section').waypoint(function() { 
    $(this).find('input:first').focus(); 
});

請參閱本fiddle。

但是，使用鼠標滾輪向下滾動時，滾動有時會跳回到中間部分。這可能是瀏覽器對輸入焦點的反應。我沒有閱讀整個文檔，但沒有關於輸入焦點的例子。

如果你只是想做這個簡單的任務，我建議你放下插件。我可以告訴你如何用jQuery完成這件事。

你可以用jQuery的scroll()函數來處理滾動。您需要在滾動事件中獲得scrollTop()，然後將其與<input>的頂部offset()進行比較。

$(window).scroll(function(){ 
    var st = $(this).scrollTop(); 
    $('input[type=text]').each(function(){ 
     var offset = $(this).offset(); 

     if(st >= offset.top -20 && st < offset.top + $(this).height()){ 
      $(this).focus(); 
     } 
    }); 
});

這裏是fiddle。

來源

2013-11-20 13:05:27

是的，我在小提琴上遇到了同樣的跳躍問題。它現在可以在我的工作環境中完美工作。唯一添加的部分是在鏈接航點功能上使用'方向'，在上下滾動時我給出了不同的偏移值。如果沒有這種情況，當向上滾動時，頂部部分不會觸及目標。我也會嘗試正常的jquery方法。感謝您的全面輸入。 –

jQuery - 自動輸入焦點時，滾動擊中某些元素

回答

相關問題