如何使Tab和Enter在一系列输入中的行为相同? [英] How can I make Tab and Enter behave the same in a series of Inputs?

问题描述

我正在对一系列输入框执行一些验证.我需要确保输入的值可以被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"后会触发错误-这很烦人.)

解决方案

原来是禁用了其他搞砸了的输入.

通过创建CSS类以禁用其他输入 look 来解决该问题:

.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/

I am performing some validation on a series of input boxes. I need to ensure that a value entered is divisible by 6.

When the user tries to submit an invalid value, all other inputs are disabled until they correct the error, and a Div pops up explaining the issue.

The first approach I tried was capturing a keyup event of a Tab or 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();
   } 
  }
 });

This works fine when the user submits with an Enter, but if they tab it does the following:

• If the validation is passed, it triggers again in the next text box
• If the validation fails, the focus still moves to the next text box
• If the validation failed (and the user had pressed enter) when the user corrects it the error Div is not removed when the resubmit using Tab

The second approach was to use the Change event:

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

This also works fine with Enter, but this time if Tab is pressed after the user has corrected an error, focus is not passed onto the next text box.

See https://jsfiddle.net/bdgriffiths/sqrugh63/3/

(I also tried performing the validation using:

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

Which works fine, but triggers after each keystroke. i.e. When entering "12" the error would trigger after the "1" was pressed - which would be irritating.)

解决方案

Turns out it was disabling the other inputs that was screwing this up.

Solved the issue by creating a CSS class to make the other inputs look disabled:

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

And then force the focus to stay in the cell until the validation error is corrected:

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

So the whole function now looks like this:

$(".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/

这篇关于如何使Tab和Enter在一系列输入中的行为相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！