Question

首先，这是代码：

 var max = 1;
    $('form').find('span').keydown(function(e){
        if ((e.which > 47 && e.which < 58) || (e.which > 95 && e.which < 106)) {
            if ($(this).html() >= max) {
                e.preventDefault();
                $(this).html($(this).html().substr(0,1));
               if ($(this).is(':last-child')) {
                    $(this).parent().next().find('span:first-of-type').focus();
                }
                else
                {
                    $(this).next().focus();
                }
            }
        }
        else if (e.which != 8  && e.which != 9 && e.which != 46 && e.which != 37 &&    e.which != 38 && e.which != 39 && e.which != 40)

        {
            e.preventDefault();
        }
    });

首先，我确定它是否是一个数字，然后我检查是否有多个数字被放入。如果满足这些条件，我会阻止默认，这样我们就不能输入两个或多个字符并将焦点转移到下一个跨度。

我的问题是，在第一次按下焦点后没有移动时，我需要按两次按钮才能工作。问题是什么？我认为这是我对事件对象的不了解，但无论如何我感谢任何帮助。

Answer 1

一些事情：

使用keyup代替keydown。您想要检查添加新数字的时间。
使用$(this).html().length == max检查何时达到最大位数。现在您不需要substr，只需将焦点更改为下一个元素。

Example fiddle （注意：我在示例中将span更改为输入）

<强>更新

以下是未来参考的最终代码：

var max = 1;
$('form').find('input').keydown(function (e) {
    if ((e.which > 47 && e.which < 58) || (e.which > 95 && e.which < 106)) {
        if ($(this).val().length < max) {
            return;
        } else {
            e.preventDefault();
        }
    } else if (e.which != 8 && e.which != 9 && e.which != 46 && e.which != 37 && e.which != 38 && e.which != 39 && e.which != 40) e.preventDefault();
}).keyup(function (e) {
    if ($(this).val().length >= max) {
        if ($(this).is(':last-child'))
            $(this).parent().next().find('input:first-of-type').focus();
        else
            $(this).next().focus();
    }
});

Answer 2

尝试使用keyup代替keydown。

关于contenteditable跨度的keydown事件

2 个答案: