Javascript 按向上箭头键时防止文本输入中的默认行为

我正在使用带有数值的基本HTML

文本字段

我正在添加JavaScript事件

keyup

，以查看用户何时按向上箭头键（

e.which==38

）——然后增加数值

代码运行得很好，但有一件事让我很烦。当我按下向上箭头键时，Safari/Mac和Firefox/Mac都会在一开始移动光标。据我所知，这是每个

文本字段的默认行为，而且很有意义

但这并不会产生光标前后跳跃的非常美观的效果（在值被更改后）

开始时的跳转发生在按下键时，但即使知道这一点，我也无法阻止它的发生。我尝试了以下方法：

input.addEventListener('keydown', function(e) {
    e.preventDefault();
}, false);

将

e.preventDefault（）

放入

keyup

事件也没有帮助

---

有没有办法阻止光标移动？

可能没有。相反，您应该寻找一种解决方案，将光标移回其所在字段的末尾。这种效果对用户来说是一样的，因为它太快了，人类无法察觉

我在谷歌上搜索了一些，找到了这段代码。我现在不能测试它，据说它不能在IE6上工作

---

textBox.setSelectionRange（textBox.value.length，textBox.value.length）

我测试了代码，它似乎取消了事件，但如果在很短的时间内不按箭头，则会触发keypress事件，而该事件实际上会移动光标。只需在按键事件处理程序中使用preventDefault（），就可以了。

要保留光标位置，请在更改值之前备份

输入。选择Start

问题是WebKit对

keydown

做出反应，Opera更喜欢

keypress

，因此存在一个难题：两者都被处理和限制

var ignoreKey = false;
var handler = function(e)
{
    if (ignoreKey)
    {
        e.preventDefault();
        return;
    }
    if (e.keyCode == 38 || e.keyCode == 40) 
    {
        var pos = this.selectionStart;
        this.value = (e.keyCode == 38?1:-1)+parseInt(this.value,10);        
        this.selectionStart = pos; this.selectionEnd = pos;

        ignoreKey = true; setTimeout(function(){ignoreKey=false},1);
        e.preventDefault();
    }
};

input.addEventListener('keydown',handler,false);
input.addEventListener('keypress',handler,false);

---

我发现一个更好的解决方案就是

返回false要防止默认箭头键行为，请执行以下操作：

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);

实际上，有一种更好更简单的方法来做这项工作

$('input').bind('keydown', function(e){
    if(e.keyCode == '38' || e.keyCode == '40'){
        e.preventDefault();
    }
});

是的，太容易了
 在我的情况下（react）有助于：

onKeyDown={
（e） =>{
如果（e.key=='ArrowUp'| | e.key==='ArrowDown'）e.preventDefault（）；
}
}

而且，
onKeyUp
功能齐全
谢谢。实际更新input.value将导致光标在末尾向后移动。因此，我可以检测光标的位置，然后在改变后恢复它（例如，如果它在数字中间）。但我仍然在寻找更好的解决方案，如果它可用的话。不幸的是，
keypress
事件中的
e.preventDefault（）
阻止我在那里输入任何内容（我希望输入像Firebug一样工作）。但这并不能解决我的问题，至少在我的浏览器中是这样的——光标在一开始就跳了起来。搞糟了！非常感谢，太完美了。：）投票支持“混帐”！为我工作，谢谢你的回答。其思想是使用keydown事件而不是keyup。右键向下就是诀窍。请注意，返回false似乎会完全停止事件的传播，而
preventDefault（）
将允许输入框忽略事件，同时仍允许其他侦听器在事件冒泡时处理它。@Lukas，您的解决方案对我最有效。但是，我正在调用
e.preventDefault（）
而不是返回
false
。后者没有实现向上箭头键行为的冻结。感谢您发布一个更简单的替代解决方案。这是正确的答案！我必须使用keydown事件来停止光标移动，然后在需要时使用keydup事件来获取输入值。使用e.code===“ArrowUp”| | e.code===“ArrowDown”将使代码更易于阅读。