html - 当输入为最大长度时，自动移动到下一个输入字段并返回退格键

Question

我正在制作信用卡输入字段。我需要在输入最大数字长度后切换光标并且使用退格键删除时需要关注前一个字段。

(function ($) {
   $(".nmipay-input-field").keyup(function () {
                    if (this.value.length == this.maxLength) {
                      var $next = $(this).next('.nmipay-input-field');
                      if ($next.length){
                          $(this).next('.nmipay-input-field').focus();
                      }else{
                          $(this).blur();
                      }
                    }
        });
})(jQuery);

#CheckoutCreditCard fieldset {
      position:relative;
            display: inline-block;
            width: 100%;
            border: 1px solid #C5C5C5 !important;
        }

        #CheckoutCreditCard .nmipay-input-field {
         border:none!important;
      position:relative;
        }

        #CheckoutCreditCard .nmipay-input-field:focus {
          outline:none!important;
        }

        /* Change the white to any color */
         input:-webkit-autofill,
         input:-webkit-autofill:hover, 
         input:-webkit-autofill:focus, 
         input:-webkit-autofill:active  {
            -webkit-box-shadow: 0 0 0 30px white inset!important;
            -moz-box-shadow: 0 0 0 30px white inset!important;
        }

        #CheckoutCreditCard label {
          font-family: "futura-bold";
          font-size: 15px!important; 
          line-height: 2!important;
          color: #515151!important;
        }

        #CheckoutCreditCard input {
          color: #0a3956!important;
          font-family: "futura-bold";  
          min-height: 50px!important;
          font-size: 16px!important;
          background-color: transparent!important;
            -webkit-box-shadow: none!important;
              -moz-box-shadow: none!important;
        }

        input#nmipay-card-number {
            width: 54%;
        }

        input#nmipay-card-expiry {
            width: 21%;
        }

        input#nmipay-card-cvc {
            width: 18%;
      margin-right:2px;
        }
        input::placeholder {
            color: #c5c5c5;
            opacity: 1; /* Firefox */
        }

        input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #c5c5c5;
        }

        input::-ms-input-placeholder { /* Microsoft Edge */
            color: #c5c5c5;
        }
        @media (max-width: 767px){
            input#nmipay-card-number {
                width: 54%;
                margin-right: 2px!important;
            }
            
            input#nmipay-card-expiry {
                width: 20%;
                padding-right: 2px!important;
            }
            
            input#nmipay-card-cvc {
                width: 15%;
            }
            
            #CheckoutCreditCard input {
                min-height: 45px!important;
                font-size: 12px!important;
            }
        }   
        
        @media (max-width: 360px){
            #CheckoutCreditCard input {
                font-size: 10px!important;
            }
      
            #add_payment_method #payment ul.payment_methods li input, 
      .woocommerce-cart #payment ul.payment_methods li input, 
      .woocommerce-checkout #payment ul.payment_methods li input {
                margin: 0 .5em 0 0;
            }

        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="CheckoutCreditCard" class="CC_container"">
    <div class="CC_input_group"">
      <fieldset id="nmipay-cc-form" class="wc-credit-card-form wc-payment-form">
        <input id="nmipay-card-number" class="nmipay-input-field  input-text wc-credit-card-form-card-number" type="text" maxlength="20" autocomplete="off" placeholder="Card Number" name="nmipay-card-number" />
        <input id="nmipay-card-expiry" class="nmipay-input-field  input-text wc-credit-card-form-card-expiry" type="text" maxlength="7" autocomplete="off" placeholder="MM / YY" name="nmipay-card-expiry" />
            
        <input id="nmipay-card-cvc" class="nmipay-input-field input-text wc-credit-card-form-card-cvc" type="text" autocomplete="off" maxlength="4" placeholder="CVC" name="nmipay-card-cvc"/>
   
        <div class="clear"></div>
       </fieldset>
    </div>
</div>

标签： htmljquery

Answer 1

您可以通过检查length值并将焦点更改为prev字段来执行此操作。

if (this.value.length == 0)
      $(this).prev('.nmipay-input-field').focus();

(function($) {
  $(".nmipay-input-field").keyup(function() {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.nmipay-input-field');
      if ($next.length) {
        $(this).next('.nmipay-input-field').focus();
      } else {
        $(this).blur();
      }
    }
    //***** Delete Check *****//
    if (this.value.length == 0)
      $(this).prev('.nmipay-input-field').focus();
  });
})(jQuery);

#CheckoutCreditCard fieldset {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid #C5C5C5 !important;
}

#CheckoutCreditCard .nmipay-input-field {
  border: none!important;
  position: relative;
}

#CheckoutCreditCard .nmipay-input-field:focus {
  outline: none!important;
}


/* Change the white to any color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset!important;
  -moz-box-shadow: 0 0 0 30px white inset!important;
}

#CheckoutCreditCard label {
  font-family: "futura-bold";
  font-size: 15px!important;
  line-height: 2!important;
  color: #515151!important;
}

#CheckoutCreditCard input {
  color: #0a3956!important;
  font-family: "futura-bold";
  min-height: 50px!important;
  font-size: 16px!important;
  background-color: transparent!important;
  -webkit-box-shadow: none!important;
  -moz-box-shadow: none!important;
}

input#nmipay-card-number {
  width: 54%;
}

input#nmipay-card-expiry {
  width: 21%;
}

input#nmipay-card-cvc {
  width: 18%;
  margin-right: 2px;
}

input::placeholder {
  color: #c5c5c5;
  opacity: 1;
  /* Firefox */
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #c5c5c5;
}

input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #c5c5c5;
}

@media (max-width: 767px) {
  input#nmipay-card-number {
    width: 54%;
    margin-right: 2px!important;
  }
  input#nmipay-card-expiry {
    width: 20%;
    padding-right: 2px!important;
  }
  input#nmipay-card-cvc {
    width: 15%;
  }
  #CheckoutCreditCard input {
    min-height: 45px!important;
    font-size: 12px!important;
  }
}

@media (max-width: 360px) {
  #CheckoutCreditCard input {
    font-size: 10px!important;
  }
  #add_payment_method #payment ul.payment_methods li input,
  .woocommerce-cart #payment ul.payment_methods li input,
  .woocommerce-checkout #payment ul.payment_methods li input {
    margin: 0 .5em 0 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="CheckoutCreditCard" class="CC_container" ">
    <div class="CC_input_group "">
  <fieldset id="nmipay-cc-form" class="wc-credit-card-form wc-payment-form">
    <input id="nmipay-card-number" class="nmipay-input-field  input-text wc-credit-card-form-card-number" type="text" maxlength="20" autocomplete="off" placeholder="Card Number" name="nmipay-card-number" />
    <input id="nmipay-card-expiry" class="nmipay-input-field  input-text wc-credit-card-form-card-expiry" type="text" maxlength="7" autocomplete="off" placeholder="MM / YY" name="nmipay-card-expiry" />

    <input id="nmipay-card-cvc" class="nmipay-input-field input-text wc-credit-card-form-card-cvc" type="text" autocomplete="off" maxlength="4" placeholder="CVC" name="nmipay-card-cvc" />

    <div class="clear"></div>
  </fieldset>
</div>
</div>