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 - 自动输入焦点时，滚动击中某些元素

回答

相关问题