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

Arrow keys not working in input and textarea

本文关键字：文本 区域 不起作用 输入      更新时间：2023-09-26

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

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

关于为什么箭头可能不起作用，有什么想法吗？

谢谢！

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

keyCode == 37

或

which == 37

因为这是左箭头。可能在某个地方有类似的东西：

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

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

要解决这个问题，只需在灯箱的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是转义键，所以你可以把它留在那里，然后去掉其余的。

您还可以查找以下内容

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

或

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

如本评论所述，调试此问题的一个好方法可以是开发人员工具：选择有问题的文本区域（例如使用ctrl+shift+C），然后转到Event listeners选项卡。

我在keydown类别下找到了行为的起源。不出所料，这是我之前不知怎么错过的e.preventDefault();。

相关文章：