上CONTENTEDITABLE跨度

Question

首先的keydown事件，这里的代码：

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

几件事情：

1. 使用keyup而不是​​。您想要检查何时添加了新数字。

2. 使用$(this).html().length == max来检查您是否已达到最大位数。现在您不需要substr，只需将焦点更改为下一个元素即可。

Example fiddle（注：我改变跨度例如在输入）

UPDATE

这里以供将来参考最终代码：

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而不是​​。