箭头键在输入和文本区域中不起作用答案

【问题标题】：Arrow keys not working in input and textarea箭头键在输入和文本区域中不起作用
【发布时间】：2022-01-05 00:16:06
【问题描述】：

我的 web 应用程序中有一个简单的文本区域和输入。出于某种原因，我无法使用箭头键返回键入的文本。输入光标不会向后移动。

但是我可以使用 ctrl+a，或者用鼠标点击我想要编辑的位置。这令人困惑。我没有在代码中的任何关键事件中使用 e.preventDefault - 大约有 30 个 js 文件和一些巨大的 css 文件 -.

关于为什么箭头可能不起作用的任何想法？

谢谢！

【问题讨论】：

【解决方案1】：

在所有 JS 文件中进行搜索并查找类似于以下内容的内容：

keyCode == 37

或

which == 37

因为这是左箭头。可能某处有类似的东西：

if (e.keyCode == 37)
   e.preventDefault();

【讨论】：

就是这样。在搜索我的 js 文件的内容后，我发现我有一个下拉菜单组件，它阻止了 (33, 34, 35, 36, 37, 38, 39, 40) 的默认值。谢谢！
当我第一次看到这个答案时，我很怀疑。然后我试了你说的。事实证明你是对的。大吃一惊。
这为我节省了大量时间，谢谢

【解决方案2】：

只是添加评论以帮助人们在灯箱中加载输入和文本区域。大多数灯箱将箭头键绑定到照片导航（上一个，下一个），因此箭头键在您的表单字段中不起作用。

要解决此问题，只需在灯箱的 javascript 代码中搜索键码（如 Jules 建议的那样）并删除绑定箭头键的代码块。或者你可以调节它。

例如，right-lightbox.js 中的键绑定代码是

var b=p.current,c=({27:"close",33:"prev",37:"prev",38:"prev",39:"next",40:"next",34:"next"})[a.keyCode];

27 是转义键，因此您可以将其保留在那里，然后删除其余部分。

【讨论】：

【解决方案3】：

您还可以查找以下内容：

@HostListener('keydown.arrowup', ['$event']) keyUp(event) {

或

@HostListener('keydown.arrowdown', ['$event']) keyUp(event) {

【讨论】：