在移动设备的文本输入焦点上滚动页面? [英] Scroll page on text input focus for mobile devices?

问题描述

我正在制作一个带有文字输入的移动设备优化网站，该文字输入会在您键入内容时过滤列表.其类似于以下内容: http://jquerymobile.com/test/docs/lists/list-search.html

Im making a mobile optimised site with a text input which filters a list as you type. Its similar to this: http://jquerymobile.com/test/docs/lists/lists-search.html

对于电话，如果在选择输入时页面向下滚动，从而使输入位于页面顶部，则将具有可用性优势.这样，您键入时就会看到下面的列表.这可能和/或有人有经验吗?谢谢

For phones, it would be a usability benefit if when you selected the input the page scrolled down so the input was at the top of the page. That way as much of the list below would be visible as you type. Is this possible and/or does anyone have experience doing it? Thanks

推荐答案

同意-很好的可用性.

如果您使用的是jQuery，这应该可以解决问题:

If you're using jQuery, this should do the trick:

$('#id-of-text-input').on('focus', function() {
    document.body.scrollTop = $(this).offset().top;
});

这篇关于在移动设备的文本输入焦点上滚动页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！