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。

问题在于WebKit对keydown作出反应而Opera更喜欢keypress，因此存在kludge：两者都被处理和限制。

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.keyCode === 38 || e.keyCode === 40) return false;
}, false);

Answer 3

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

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

是的，这很容易！

Answer 4

我测试了代码，它似乎取消了事件，但是如果你没有按箭头很短的时间 - 它会触发按键事件，并且该事件实际上会移动光标。只需在keypress事件处理程序中使用preventDefault（），它应该没问题。

Answer 5

就我而言（反应）有所帮助：

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

和onKeyUp功能齐全

Answer 6

可能不是。您应该寻求一种解决方案，将光标移回到字段的末尾。对于用户来说效果是相同的，因为它太快被人类察觉。

我用google搜索了一段代码，发现了这段代码。我现在无法测试，据说不能在IE 6上运行。

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

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

6 个答案: