37

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

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

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

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

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

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

e.preventDefault()参加keyup活动也无济于事。

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

4

6 回答 6

30

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

问题是 WebKit 对keydownOpera 的反应和偏好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);
于 2009-07-03T23:18:52.200 回答
17

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

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);
于 2014-01-09T23:37:08.777 回答
8

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

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

是的，就是这么简单！

于 2014-09-28T07:05:37.053 回答
0

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

于 2009-07-03T19:42:13.550 回答
0

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

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

并且onKeyUp功能齐全

于 2020-10-19T10:14:59.307 回答
-2

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

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

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

于 2009-07-03T19:24:20.023 回答