jQuery-滚动到某个元素时自动输入焦点

jQuery - auto input focus when scroll hit certain element

本文关键字：输入 焦点 元素 滚动 jQuery-      更新时间：2023-09-26

我正在使用名为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中完成如果不熟悉这个插件。

jQuery Waypoints使用起来非常简单。我还没有尝试过你的代码，但我已经完成了这个： 
$('input:first').focus();
$('section').waypoint(function() {
    $(this).find('input:first').focus();
});

请看这把小提琴。

但是，使用鼠标滚轮向下滚动时，滚动有时会跳回中间部分。这可能是浏览器对输入焦点的反应。我还没有看完整的文档，但没有输入焦点的例子。

如果你只想做这个简单的任务，我建议你放弃这个插件。我可以向您展示如何使用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();  
        } 
    });  
});

这是小提琴。

相关文章：