如何使Tab和Enter在一系列輸入中的行為相同？

Question

我正在對一系列輸入框執行一些驗證。 我需要確保輸入的值可以被6整除。

當用戶嘗試提交無效值時，所有其他輸入都將被禁用，直到他們糾正錯誤為止，然后彈出Div解釋該問題。

我嘗試的第一種方法是捕獲Tab或Enter的鍵入事件：

$(".test1").keyup(function(event) {
  if((event.keyCode == 9) || (event.keyCode == 13)) {
     event.preventDefault();      
   var valid = true;
   if(parseInt($(this).val()) % 6 != 0){
    valid = false;
    $('#errorMessage').html("That's not divisible by 6");
   }
   if (!valid){
    // Show error message and disable other text boxes
    var position = $(this).position();
    $('input').not(this).prop('disabled', true);
    $("#validation").show();
    $("#validation").offset({top:position.top, left:position.left + $(this).width()});
   } else {
    // Hide error message and enable other text boxes
    $("#validation").delay(200).hide();
    $('input').not(this).prop('disabled', false);
    $(this).parent().next().find('.test1').focus();
   } 
  }
 });

當用戶使用Enter提交時，此方法很好用，但是如果用戶使用Tab鍵進行了以下操作：

• 如果驗證通過，它將在下一個文本框中再次觸發
• 如果驗證失敗，焦點仍將移至下一個文本框
• 如果在用戶更正后驗證失敗（並且用戶已按Enter鍵），則在使用Tab重新提交時不會刪除錯誤Div。

第二種方法是使用Change事件：

$(".test2").change(function(){
 var valid = true;
 if(parseInt($(this).val()) % 6 != 0){
  valid = false;
  $('#errorMessage').html("That's not divisible by 6");
 }
 if (!valid){
  // Show error message and disable other text boxes
  var position = $(this).position();
  $('input').not(this).prop('disabled', true);
  $("#validation").show();
  $("#validation").offset({top:position.top, left:position.left + $(this).width()});
 } else {
  // Hide error message and enable other text boxes
  $("#validation").delay(200).hide();
  $('input').not(this).prop('disabled', false);
  $(this).parent().next().find('.test2').focus();
 } 
});

這在Enter上也可以正常使用，但是這一次，如果在用戶更正錯誤后按下Tab鍵，則焦點不會傳遞到下一個文本框。

參見https://jsfiddle.net/bdgriffiths/sqrugh63/3/

（我還嘗試使用以下方法執行驗證：

$('.test').on('input', function() {  ...Do the validation... }

效果很好，但是在每次擊鍵后觸發。 例如，當輸入“ 12”時，錯誤將在按下“ 1”后觸發-這很煩人。）

Answer 1

原來是禁用了其他搞砸了的輸入。

通過創建CSS類以使其他輸入看起來無效來解決該問題：

.disabledClass {
  background-color: #eee;
  color: #ccc;
  border: 1px solid #ccc;
}

然后強制焦點停留在單元格中，直到糾正驗證錯誤為止：

$(this).focus().select();

所以整個功能現在看起來像這樣：

$(".test2").blur(function() { 
    var valid = true;
    if (parseInt($(this).val()) % 6 != 0) {
      valid = false;
      $('#errorMessage').html("That's not divisible by 6");
    }
    if ((valid) || (!($(this).val()))) { // valid or blank
      // Hide error message and enable other text boxes
      $("#validation").fadeOut(500);
      $('input').not(this).removeClass('disabledClass');
    } else { // not valid
      // Show error message and disable other text boxes
      var position = $(this).position();
      $('input').not(this).addClass('disabledClass');
      $("#validation").fadeIn(500);
      $("#validation").offset({
        top: position.top,
        left: position.left + $(this).width()
      });
      $(this).focus().select();
    }
  });

https://jsfiddle.net/bdgriffiths/sqrugh63/9/