防止使用箭头键滚动页面，但仍允许光标在文本字段内移动？答案

【问题标题】：Prevent page-scrolling with arrow keys, but still allow cursor to move within text field?防止使用箭头键滚动页面，但仍允许光标在文本字段内移动？
【发布时间】：2015-11-18 16:06:18
【问题描述】：

是否可以使用 JavaScript 防止箭头键滚动页面（在本示例中为水平滚动），但仍允许箭头键在文本字段内移动光标？

例如 - 我有一个超宽 <div> 的文本输入，当我使用箭头键将光标移动到文本的末尾时，它会水平滚动页面。

我知道我可以使用event.preventDefault(); 来防止默认行为，但这也可以防止光标移动。我也试过e.stopPropagation();，好像也没有用。

是否可以这样做，或者我必须使用e.preventDefault();，然后也使用 JavaScript 手动移动光标位置？我希望有一个更简单的解决方案。 :)

这是一个展示我的问题的 JSFiddle： http://jsfiddle.net/h6ug57u0/

编辑：

我应该注意，我只是在输入有焦点时才尝试实现这种行为。否则，我不想妨碍浏览器的默认行为 - 我知道许多用户使用箭头键滚动。

【问题讨论】：

仅供参考，该行为似乎取决于浏览器。在 IE11 中测试了您的小提琴，它不滚动 div，而 Chrome 的行为与您描述的一样。
是的，我现在也看到了。没试过。留给 IE 不一样吧……
我知道这在某些情况下会很烦人，但你应该非常小心地打算覆盖默认浏览器行为。您永远不知道什么时候会干扰您无意中的事情，甚至会弄乱残疾用户的特殊导航软件。

标签： javascript scroll horizontal-scrolling

【解决方案1】：

也许您需要检查输入插入符号的位置以分析您是否e.preventDefault()。

举个例子：

http://jsbin.com/cunidinuvo/edit?html,js,output

【讨论】：

没想到这个...有趣。它似乎运作良好。我会试一试！谢谢
这似乎是要走的路。我不得不做一个小的调整（不是用你的代码），但我忘了我实际上使用的是contentEditable div，所以我在这里找到了一个很好的例子来获取contentEditable 元素的插入符号位置：stackoverflow.com/questions/3972014/…
太棒了！没想到这个案子，真的很棒！

【解决方案2】：

为什么不直接在文本框中添加一个 onkeypress 事件处理程序，然后检查箭头键？

【讨论】：

如果您参考我提供的 JSFiddle 链接，我已经尝试使用 onkeydown - 不确定这与 onkeypress 之间是否有显着差异 - 但即使我检查箭头钥匙在这里，然后呢？如果我e.preventDefault();，箭头键不会在文本输入中移动光标。
如果你做一个 preventDefault，你总是可以使用文本框的 selectionStart 属性手动移动光标。
是的 - 我知道我可以这样做，正如我上面提到的，但这似乎很乏味。我只是希望在这里找到我可能没有想到的任何解决方案。