Javascript 防止页面在焦点切换时滚动

我不熟悉移动网络/开发。我的应用程序使用jquery mobile、phonegap和Compass（scss）

我的登录页面有问题：

徽标和字段包含在标准的“div”容器中（data role=“content”data type=“vertical”）。背景是彩色的

当焦点从登录字段切换到密码字段时，页面会向上滑动，这是我不希望出现的情况。我希望我的徽标和字段保持不变，就像Skype iOS应用程序登录页面一样

发生的情况如下：

我尝试了几种技巧，试图阻止滚动事件，或强制页面滚动到0,0，但都没有成功

我现在正在考虑一种新的策略，可能是对徽标和字段使用顶部相对定位，并捕捉焦点事件以在键盘上向上滑动页面（通过设置顶部相对定位坐标的动画）

虽然这似乎是可行的，但我想知道这是否是Skype iOS应用程序团队所使用的解决方案

欢迎对本案例中使用的工艺提出任何建议

干杯

---

Fred

我还没有测试过这个问题，但是e.preventDefault（）能阻止这个问题吗？通常使用e.preventDefault（）停止默认的滚动/拖动行为

$(document).bind('focus', function(e){
  e.preventDefault();
});

或者更好

$(element).bind('focus', function(e){
  e.preventDefault();
});

或

输入字段是否更有效

$(":input").live({
  focus: function(e) {
    e.preventDefault();
  }
});

---

我最终没有成功地找到任何编码解决方案来处理我的问题，但我注意到，一个手外科的定位允许我在字段之间切换时对屏幕进行折边

整个登录屏幕的可用空间不得超过键盘可见后的可用空间，即200像素。此外，为了防止在切换字段时滚动，最后一个输入字段的中心位置最大不得超过100像素。使用CSS，可以在填充和边距上播放，以达到所需的结果

通过移除键盘“字段导航栏”，应该可以获得额外的垂直空间，但我也不知道如何做到这一点：/

---

我想您应该直接调用元素上的焦点，并使用“preventScroll”选项

el.focus（{preventsroll:true}）

我遇到了一个类似的问题（页面在单击/焦点时滚动），我花了一段时间才找到解决方案，所以我在这里记录了它

我有一个自定义的表单字段，当点击时会将页面滚动到顶部。原来输入是用
position:absolute隐藏的；顶部：-9999999像素（因为如果正确隐藏它，则焦点事件不起作用）。这会将隐藏的输入放在页面顶部。然后，当我们点击标签并聚焦输入时，页面被滚动到顶部

我在搜索“在焦点上滚动到顶部/单击”之类的东西，但我找不到任何像样的东西。解决方案是使用
右侧：-999999px
。我避免使用典型的
左：-999999px
，因为在使用
方向：rtl时，这显然会影响站点
我很确定Skype iOS应用程序使用的是登录字段的本机视图，而不是Phonegap如何使用网络视图工作。可能试图将身高更改为100%，或者在页面打开时将登录名/密码放在上半部分。@GeekNum88当然可以。Soleshoe正在使用WebView寻找解决方案。@Zulakis-愚蠢的输入键-我还没输入完。。。sigh@Soleshoe很好的表现……我注意到，当键盘弹出时，顶部相对定位的元素不会向上滑动（这就是我考虑自己处理元素向上滑动的原因）第一个和第二个解决方案对我的问题没有任何作用。第三种解决方案防止用户切换焦点。。。第四种解决方案确实可以防止键盘在登录字段上滑动。focus（）被调用（但在触摸字段时键盘确实会向上滑动，问题仍然是一样的）…看看这个解决方案：@mohsinulhaq in Firefox 66（2019）preventScroll也适用于fineUPDATE：我错了-似乎在Firefox中preventScroll只适用于水平滚动，垂直滚动仍然适用：/in Chrome preventScroll适用于两个方向
$(":input").live({
  focus: function(e) {
    e.preventDefault();
  }
});

$('#el').focus((e) => {
  e.preventDefault();
  e.target.focus({preventScroll: true});
})