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

Question

我正在使用<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事件也没有帮助.

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

Answer 1

要保留光标位置,请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);

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();
    }
});

是的，这很容易！