阻止<input>元素在iPhone上滚动屏幕？

Question

<input type="number">我的网页上有几个元素.我正在使用jQTouch,我一直想保持全屏; 也就是说,水平滚动很糟糕.每当我点击一个<input>元素时,页面会向右滚动,在屏幕右侧显示黑色边框并使所有内容失真.输入从屏幕左侧偏移,它们从页面中间的某处开始.

如何防止此焦点滚动？

Answer 1

我刚刚从这个帖子停止页面滚动到焦点,我找到了解决这个问题的方法

只需添加onFocus="window.scrollTo(0, 0);"到您的输入字段即可完成!(有试了一下<textarea>,并<input type="text" />在iPad上,但我敢肯定它会在iPhone上工作了.)

我担心滚动会像闪烁一样可见,但幸运的是情况并非如此!

这似乎应该可以工作,但它对于我在Safari中使用iOS 8的iPhone 5S不起作用.`event.preventDefault()`与你的解决方案结合似乎肯定会有效,但我仍然得到默认的滚动行为. (8认同)

Answer 2

这是我在iPhone(移动Safari)上解决这个问题的方法(我使用的是jQuery)

1)创建一个全局变量,该变量保存当前滚动位置,并在每次用户滚动视口时更新

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2)将焦点事件绑定到相关的输入字段.聚焦时,让文档滚动到当前位置

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

塔达!没有烦人的"滚动焦点"

要记住一件事......确保输入字段在键盘上方,否则您将隐藏字段.通过添加if子句可以轻松缓解这种情况.