javascript - 当输入有焦点时禁用带箭头的窗口滚动

Question

我有一个看起来像这样的表:

Example

让我发疯的行为是当你将焦点放在输入元素上并按住键盘上的向右箭头时，当插入符触摸行尾时整个窗口自动开始滚动。我对 preventDefault 和 stopPropagation 非常着迷，但没有成功。

有没有办法让用户在输入元素中自由移动插入符号，但是当他点击边框时，主窗口不会滚动？

Answer 1

您可以通过设置来防止水平滚动:

body {
    width: 100%;
}

body.prevent-scroll {
    overflow: hidden;
}

然后我们监听focus和blur事件来添加或删除类:

$("input")
  .on("focus", function() { 
      $("body").addClass("prevent-scroll")
  })
  .on("blur", function() { 
      $("body").removeClass("prevent-scroll")
  })

http://jsfiddle.net/9zgspozq/2/