Keyup 事件触发下一个输入字段的操作

Question

我有 3 个输入框。当用户在其中输入任何值时，我想调用函数以突出显示框。通过使用 keyup 功能，我能够实现它，但它也会触发其下一个输入元素的 keyup 功能。下面是我的代码

工作演示 - https://www.w3schools.com/code/tryit.asp?filename=G38SF7O5Q7MQ

<div>
    <input type="text" class="cDate" />
    <input type="text" class="cMonth" />
    <input type="text" class="cYear" />
</div>
<div class="error-msg"></div>
<script>
    $(document).ready(function(){
      $('.cDate').on('keyup blur change', function(){
            $(this).next().trigger('focus');
            highlightInputs(this)
      });

      $('.cMonth').on('keyup blur change', function(){
            $(this).next().trigger('focus');
            highlightInputs(this)
      });

      $('.cYear').on('keyup blur change', function(){
            $(this).trigger('focusout');
            highlightInputs(this)
      });
    });

    function highlightInputs(_inputs) {
        $(_inputs).each(function(){
            if($(this).val() == ''){
              $(this).addClass('error');
              $('.error-msg').text('Please enter valid date');
              $('.error-msg').show();
            }
            else{
              $(this).removeClass('error');
              $('.error-msg').text('Please enter valid date');
              $('.error-msg').hide();
            }
        });
    }
</script>

Answer 1

它对我有用。我只是将您的代码复制到下面的 sn-p 中：

$(document).ready(function() {
  $('.cDate').on('keyup blur change', function() {
    $(this).next().trigger('focus');
    highlightInputs(this)
  });

  $('.cMonth').on('keyup blur change', function() {
    $(this).next().trigger('focus');
    highlightInputs(this)
  });

  $('.cYear').on('keyup blur change', function() {
    $(this).trigger('focusout');
    highlightInputs(this)
  });

  $("input").on('keydown', function(e) {
    var code = e.keyCode ? e.keyCode : e.which;
    if (code == 9) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
});

function highlightInputs(_inputs) {
  $(_inputs).each(function() {
    if ($(this).val() == '') {
      $(this).addClass('error');
      $('.error-msg').text('Please enter valid date');
      $('.error-msg').show();
    } else {
      $(this).removeClass('error');
      $('.error-msg').text('Please enter valid date');
      $('.error-msg').hide();
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="text" class="cDate" />
  <input type="text" class="cMonth" />
  <input type="text" class="cYear" />
</div>
<div class="error-msg"></div>