javascript - 使用 keyup 捕获 TAB 键按下

Question

我需要完成 2 个目标，但我一次完成一个目标，而不是同时完成两个目标。首先，我有一个输入字段，当按下一个键时应该触发一个事件，我需要捕获该字段值。我使用字母、数字和 TAB 键。因此，如果我使用 keyup，它会在第一个字符处触发。如果我使用 keydown，则需要 2 个字符才能触发，因为当它第一次触发时，字符还没有被按下。因此，当我第二次按下时，它会触发第一个字母，依此类推。

也就是说，很明显我需要的是将值放入字段然后触发事件的 keyup 事件。但 TAB 在我的例子中有特殊含义，它不是默认行为，使用 TAB 键我无法捕获 e.which、e.charCode 或 e.keyCode!只有通过 keydown 我才能获得这些值!

现在我不知道该怎么做。我如何捕获 TAB 键或使 keydown 捕获字段的值？

P.S keypress 也可以用作 keydown。在我在字段中获得值之前触发事件

编辑 1:这是代码:

$('input[data-action="keyupNome"]').each(function () {          
        $(this).on("keypress", function(e) {    

            //Se o campo não estiver vazio
            if($(this).val() != '') {               

                if(key != 9)  // the tab key code
                {                                                               
                    limpaCamposBusca('nome');

                    var width  = $('#nomeBusca').width();
                    $('.nomeContainer').css('width', width);            
                    $('.displayNomeTbl').css('width', width);

                    buscaEndereco('Controller/Dispatcher.php?classe=Buscas&acao=buscaEnderecoPorNome', 'nome');     

                }//if key == 9
                else {
                    alert('here');
                    e.preventDefault();
                }       
            }// val == ''   
            else {                  
                clearFields();
                clearBuscaCliente();
                reactivateFields();
            }       

        }); 
    });

Answer 1

诀窍是使用 keydown 并将字段的实际值与当前按下的字符组合，或者在 keydown 中捕获 TAB 并设置要使用的外部变量在 keyup 中，如我的示例所示。

编辑:事实上，我意识到不阻止 keydown 中 TAB 的默认行为不会触发 keyup。因此，不需要变量，只是防止按下 TAB 键。无论如何，如果您所说的故障在某些情况下存在，则此版本始终有效。

(function() {

var tabKeyPressed = false;

$("#t").keydown(function(e) {
   tabKeyPressed = e.keyCode == 9;
   if (tabKeyPressed) {
      e.preventDefault();
      return;
   }
});

$("#t").keyup(function(e) {
   if (tabKeyPressed) {
      $(this).val("TAB"); // Do stuff for TAB
      e.preventDefault();
      return;
   }

   //Do other stuff when not TAB
});

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="t" value="">