<input type="number">
我的网页上有几个元素。我正在使用 jQTouch,并且我试图始终保持全屏状态;也就是说,水平滚动不好。每当我单击一个<input>
元素时,页面就会向右滚动,在屏幕右侧显示黑色边框并使所有内容偏离中心。输入从屏幕左侧偏移,它们从页面中间的某个位置开始。
如何防止焦点滚动?
<input type="number">
我的网页上有几个元素。我正在使用 jQTouch,并且我试图始终保持全屏状态;也就是说,水平滚动不好。每当我单击一个<input>
元素时,页面就会向右滚动,在屏幕右侧显示黑色边框并使所有内容偏离中心。输入从屏幕左侧偏移,它们从页面中间的某个位置开始。
如何防止焦点滚动?
我刚刚在这篇文章中找到了解决此问题的方法Stop page scrolling from focus
只需添加onFocus="window.scrollTo(0, 0);"
到您的输入字段,您就完成了!(在 iPad 上尝试过<textarea>
,<input type="text" />
但我很确定它也可以在 iPhone 上使用。)
我担心滚动会显示为闪烁或其他东西,但幸运的是事实并非如此!
这是我在 iPhone(移动 Safari)上解决这个问题的方法(我使用了 jQuery)
1)创建一个保存当前滚动位置的全局变量,每次用户滚动视口时都会更新该变量
var currentScrollPosition = 0;
$(document).scroll(function(){
currentScrollPosition = $(this).scrollTop();
});
2)将焦点事件绑定到有问题的输入字段。聚焦时,让文档滚动到当前位置
$(".input_selector").focus(function(){
$(document).scrollTop(currentScrollPosition);
});
达达!没有烦人的“焦点滚动”
要记住的一件事......确保输入字段位于键盘上方,否则您将隐藏该字段。这可以通过添加 if 子句轻松缓解。
我建议使用链接到上面的 jQuery.animate() 方法,而不仅仅是 window.scrollTo(0,0),因为当输入元素获得焦点时,iOS 会为页面偏移属性设置动画。仅调用一次 window.scrollTo() 可能不适用于此原生动画的时间。
pageXOffset
有关更多背景信息,iOS 正在pageYOffset
为window
. 如果窗口发生移动,您可以对这些属性进行条件检查以做出响应:
if(window.pageXOffset != 0 || window.pageYOffset != 0) {
// handle window offset here
}
因此,为了扩展上述链接,这将是一个更完整的示例:
$('input,select').bind('focus',function(e) {
$('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow');
});
如果以编程方式设置焦点,我会这样做:
在更改焦点之前保存窗口的 scollTop 值。然后在设置焦点后立即将scrollTop恢复为保存的值。
如果使用 jQuery:
var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
试试这个,我认为问题是缩放:
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />