更改焦点表单元素时禁用滚动ipad web应用程序

我有一个networking应用程序。 我试图禁用/防止滚动发生在你关注不同的表单input时(即,当你通过表单中的input元素前进时发生的滚动)。

我已经禁用了这个滚动:

<script type="text/javascript"> $(document).ready(function() { document.ontouchmove = function(e){ e.preventDefault(); } }); </script> 

添加更多的信息 – 我有一些“幻灯片”,我的网页组成。 每个都是768×1024,他们是“堆叠”在页面上(即页面是768×3072 [1024 * 3 = 3072]),当你点击一个链接我使用scrollTo jquery插件滚动到下一个“幻灯片”和.focus()在input元素上。

有谁知道如何做到这一点?

我发现,在UIWebView中,document.body有时也被移动。 所以我使用:

  input.onfocus = function () { window.scrollTo(0, 0); document.body.scrollTop = 0; } 

哎呀, window.scrollTobuild议是有点不好,使事情变得不可预测。

试试更好的解决scheme:

 jQuery('body').bind('focusin focus', function(e){ e.preventDefault(); }) 

或者,只需勾选您的input:

 jQuery('input.your-input-class').bind('focusin focus', function(e){ e.preventDefault(); }) 

为什么? 浏览器可以将焦点表单元素默认滚动到“focusin”事件触发的视图中(Firefox有一个错误,所以重点关注焦点)。 所以,只要告诉他们不要那么明确。

顺便说一句,如果focus事件是由你的代码中的element.focus()触发的,那么即使是在解决scheme将无法正常工作。

所以,一个解决scheme将取代你focus触发select ,即

 element.select() 

除了element.focus()

如果你不喜欢element.select()方法,因为它会selectinput元素中的文本,然后尝试创build一个input元素文本的Range object ,如果你愿意的话,可以把它折叠起来,抱歉没时间去试试在这一刻。

如果你不希望input是可编辑的,kpozin的答案很好。 但是,只要删除readonly属性onfocusonclickinput字段再滚动焦点。

真正有帮助,并不影响焦点或input文字的能力是添加onFocus="window.scrollTo(0, 0);" 到input元素。

当然,你必须保证相关的input不被屏幕键盘覆盖!

另见这篇文章: 防止一个<input>元素在iPhone上滚动屏幕?

更新这个 – 我已经看到了window.scroll(0,0)解决scheme在几个不同的地方,但它似乎只是使情况变得更糟。 我在页面上有多个内嵌文本input,所以当在它们之间移动焦点时,Safari中的自动上下滚动使得页面几乎不可用,特别是在横向方向上。

在与iOS8战斗了一个星期后,我发现这停止了滚动。 这在将焦点从一个元素转换到另一个元素时起作用,因为您需要将onblur事件附加到某个事件上:

 var moveFocus = function (blurId, focusId) { var blurInput = document.getElementById(blurId); var focusInput = document.getElementById(focusId); if (blurInput && focusInput) { blurInput.onblur = function () { if (focusInput.setSelectionRange && focusInput.setSelectionRange()) { var len = focusInput.value.length; focusInput.setSelectionRange(len, len); } focusInput.focus(); }; focusInput.focus(); }; }; 

为了防止浏览器滚动到您移动焦点的元素,我使用jQuerys one事件侦听器。 在将焦点移动到元素之前,我们将侦听器添加到scroll事件和计数器滚动。 事件监听器不是由jQuery删除的。

 var oldScroll = $(window).scrollTop(); $( window ).one('scroll', function() { $(window).scrollTop( oldScroll ); //disable scroll just once }); $('.js-your-element').focus(); 

这种方式看起来很简单,对我很有效,而且在我所做的所有testing中都很出色。

希望它可以帮助别人。

试试BLSully 这个答案 。 将所有的input元素初始化为readonly="readonly"属性。 这将阻止移动Safari浏览器。 删除焦点上的属性,并将其添加到每个元素的模糊。

这工作对我来说(使用jQuery)。 它允许滚动,然后返回到正确的位置,当你离开input。

  var saveScrollLeft; $("input, textarea") .focus(function () { clearTimeout(blurTimeoutId); saveScrollLeft = $("body").scrollLeft(); }) .blur(function () { // The user might be moving from one input to another, so we don't want to quickly scroll on blur. Wait a second and see if they are off all inputs. blurTimeoutId = setTimeout(function () { $(window).scrollLeft(saveScrollLeft); }, 1000); }); 

没有提供的解决scheme为我工作。 由于抓取焦点的forms(以及滚动页面初始显示到所述表单)低于折叠,所以我只是在表单中添加了淡入(fade-in)。

所以我添加了一个名为fade-in的类名,相应的css display:none

使用jQuery我只是简单地做jQuery(".fade-in").fadeIn(); 文件准备好后,问题就没有了。

这显然不限于使用jQuery。 香草js可以用于淡入淡出。