如何防止HTML输入框中的按键上下行为？

Question

我知道stackoverflow上有类似的问题，但是我认为没有一个解决方案是有效的。当你在HTML输入框上聚焦时，如果你按上下箭头键，光标会自动移动到输入值的前/后。

(你可以在stackoverflow网站的右上角搜索框中检查这一点)。

我想将其删除！

我尝试了下面的代码，但不起作用：

$(document).on("keydown", "#input_field", function(event) {
    if(event.which==38 || event.which==40){
        event.preventDefault();
    }
});

这有什么解决方法吗..？

- user2492270

---

你为什么想要这样做？ - Swaroop Nagendra

@SwaroopNagendra 我正在编写一个使用箭头键的浏览器游戏。防止默认的浏览器行为非常重要...例如。 - Foxinni

答案解决了问题吗？ - MasterAM

Answer 1

我认为阻止一个相当有用的行为是没有意义的，但是对于SO搜索框，以下内容对我有效：

$(document).on("keydown keyup", "#search input", function(event) { 
    if(event.which==38 || event.which==40){
        event.preventDefault();
    }
});

这段代码针对了keyup和keydown两种事件。

- MasterAM

---

当您在输入时，出现带有建议的下拉菜单，您可以使用“keyup”和“keydown”来浏览建议。因此，在这种情况下，您不希望光标移动到开头/结尾。 - MMachinegun

此答案提供了与问题中给出的完全相同的代码。但是它也无法正常工作。 - Ian Steffy

@IanS，这不是问题中的确切代码，而是添加了两个事件监听器，分别是keydown和keyup。它在StackOverflow上在Chrome和Firefox中都可以工作（实际上，只要选择器针对input字段，原始代码现在也可以工作），我认为它在回答编写时的版本中没有工作，可能需要添加keyup监听器。如果您可以指定测试详细信息或发布一个带有详细信息的问题，我或其他人可能能够提供帮助。 - MasterAM

非常抱歉没有看到keyup。我更多的意思是event.preventDefault();我的代码是一样的，只是使用Vue.js指令来监听keyup和keydown函数。 - Ian Steffy