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

Question

我正在使用带有数值的基本 HTML <input type="text"/>文本字段。

我正在添加 JavaScript 事件keyup以查看用户何时按下向上箭头键（ e.which == 38 ）——然后我增加数值。

代码运行良好，但有一件事让我感到困扰。 当我按下向上箭头键时，Safari/Mac 和 Firefox/Mac 都会在最开始移动光标。 据我所知，这是每个<input type="text"/>文本字段的默认行为，这是有道理的。

但这不会产生光标来回跳跃的非常美观的效果（在更改值之后）。

开始时的跳转发生在keydown但即使有了这些知识，我也无法阻止它发生。 我尝试了以下方法：

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

将e.preventDefault()放在keyup事件中也无济于事。

有什么办法可以防止光标移动？

Answer 1

要保留光标位置， input.selectionStart在更改值之前备份input.selectionStart 。

问题是 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);

Answer 2

我发现更好的解决方案是return false; 防止默认的箭头键行为：

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

Answer 3

实际上，有一种更好、更简单的方法来完成这项工作。

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

是的，就是这么简单！

Answer 4

我测试了代码，它似乎取消了事件，但是如果您在很短的时间内没有按下箭头 - 它会触发按键事件并且该事件实际上会移动光标。 只需在按键事件处理程序中使用 preventDefault() 就可以了。

Answer 5

在我的情况下（反应）帮助：

onKeyDown = {
  (e) => {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') e.preventDefault();
  }
}

并且onKeyUp功能齐全

Answer 6

可能不是。 相反，您应该寻求一种解决方案，将光标移回其所在字段的末尾。 对于用户来说效果是一样的，因为它太快而无法被人类感知。

我用谷歌搜索了一些并找到了这段代码。 我现在无法测试它，据说它不适用于 IE 6。

textBox.setSelectionRange(textBox.value.length, textBox.value.length);