仅在输入第一个字符时运行 on("keyup")

Question

不是绑定函数方面的专家。我在下面创建了 sn-p 来演示我正在尝试做的事情。

我想在每次输入输入字段的第一个字符时触发一个事件，但只输入第一个字符。即使用户清除输入并重新开始，我也希望它运行。

$("#userCardNumber") 如果我使用.one("keyup", function()，那么它只运行一次，如果用户清除字段、按退格键或以其他方式键入第一个字符，它就不会再次运行（据我了解，它已被解除绑定） /解除绑定）

$("#userCardNumber2") 我可以通过使用.on("keyup", function() 在该函数中添加一个if (element.length === 1) { } 来实现我的意图，但这似乎非常低效，因为它在每个键盘上运行，因为这是一个 14-15 的卡号字段额外的时间它不必要地运行。

试图学习最有效的做事方式，很好奇如何在不消耗额外的 keyups 计算的情况下达到预期的结果，就像我在 $("#userCardNumber2") 中所做的那样？

(function($) {
  // On ready functions
  $(function() {

    $("#userCardNumber").one("keyup", function() {
      var el = $(this);
      cardType = el.val();
      if (cardType = 3) {
        console.log("AmEx");
      } else if (cardType = 4) {
        console.log("Visa");
      } else if (cardType = 5) {
        console.log("Mastercard");
      } else if (cardType = 6) {
        console.log("Discover");
      } else {
        console.log("something else");
      }
      console.log("Ran function")
    });

    $("#userCardNumber2").on("keyup", function() {
      var el = $(this);
      cardType = el.val();
      if (cardType.length === 1) {
        if (cardType = 3) {
          console.log("AmEx");
        } else if (cardType = 4) {
          console.log("Visa");
        } else if (cardType = 5) {
          console.log("Mastercard");
        } else if (cardType = 6) {
          console.log("Discover");
        } else {
          console.log("something else");
        }
      }
      console.log("Ran function")
    });

  });

}(jQuery));

div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input id="userCardNumber" type="text">
</div>

<div>
  <input id="userCardNumber2" type="text">
</div>

Answer 1

您的 JS 中有一些错误。在 if 条件而不是“==”中，您使用了“=”。除此之外，我使用不同的逻辑来解决问题。代码如下。

(function($) {
  // On ready functions
  $(function() {
    var flag1 = false;
    var flag2 = false;
     $("#userCardNumber").on("keydown", function() {
       if($("#userCardNumber").val().length < 1){
        flag1 = true;
      }
     });
    $("#userCardNumber2").on("keydown", function() {
       if($("#userCardNumber2").val().length < 1){
        flag2 = true;
      }
     });

    $("#userCardNumber").on("keyup", function() {
      if(flag1 === false){
        return;
      }
      flag1 = false;
      var el = $(this);
      cardType = el.val();
      if (cardType == 3) {
        console.log("AmEx");
      } else if (cardType == 4) {
        console.log("Visa");
      } else if (cardType == 5) {
        console.log("Mastercard");
      } else if (cardType == 6) {
        console.log("Discover");
      } else {
        console.log("something else");
      }
      console.log("Ran function")
    });

    $("#userCardNumber2").on("keyup", function() {
      if(flag2 === false){
        return;
      }
      flag2 = false;
      var el = $(this);
      cardType = el.val();
      if (cardType.length === 1) {
        if (cardType == 3) {
          console.log("AmEx");
        } else if (cardType == 4) {
          console.log("Visa");
        } else if (cardType == 5) {
          console.log("Mastercard");
        } else if (cardType == 6) {
          console.log("Discover");
        } else {
          console.log("something else");
        }
      }
      console.log("Ran function")
    });

  });

}(jQuery));

Answer 2

在keyup 上，只需检查selectionStart。

(function($) {
  // On ready functions
  $(function() {

    $("#userCardNumber2").on("keyup", function(e) {
      var el = $(this);
      cardType = parseInt(el.val());
      if (this.selectionStart == 1) {
        if (cardType == 3) {
          console.log("AmEx");
        } else if (cardType == 4) {
          console.log("Visa");
        } else if (cardType == 5) {
          console.log("Mastercard");
        } else if (cardType == 6) {
          console.log("Discover");
        } else {
          console.log("something else");
        }
      }
    });

  });

}(jQuery));

div {
  margin-top: 20px;
}

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

<div>
  <input id="userCardNumber2" type="text">
</div>

注意：使用比较运算符（==）而不是赋值运算符（=）

Answer 3

使用正则表达式可能会更有效，并且只在“模糊”上进行验证（当用户的焦点从输入移开时）。试试这样的：

(function($) {
  // On ready functions
  $(function() {

    $("#userCardNumber,#userCardNumber2").on("blur", function() {
      var number = $(this).val();
      var ccType = getCardType(number);
      console.log(ccType);
      // Implement whatever other code you want to use ccType for
    });
    
    function getCardType(number) {
      // Visa Electron
      re = new RegExp("^(4026|417500|4508|4844|491(3|7))");
      if (number.match(re) != null)
          return "Visa Electron";
          
      // visa
      var re = new RegExp("^4");
      if (number.match(re) != null)
          return "Visa";

      // Mastercard 
      // Updated for Mastercard 2017 BINs expansion
       if (/^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$/.test(number)) 
          return "Mastercard";

      // AMEX
      re = new RegExp("^3[47]");
      if (number.match(re) != null)
          return "AMEX";

      // Discover
      re = new RegExp("^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)");
      if (number.match(re) != null)
          return "Discover";

      // Diners
      re = new RegExp("^36");
      if (number.match(re) != null)
          return "Diners";

      // Diners - Carte Blanche
      re = new RegExp("^30[0-5]");
      if (number.match(re) != null)
          return "Diners - Carte Blanche";

      // JCB
      re = new RegExp("^35(2[89]|[3-8][0-9])");
      if (number.match(re) != null)
          return "JCB";


      return "";
  }

  });

}(jQuery));

div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input id="userCardNumber" type="text">
</div>

<div>
  <input id="userCardNumber2" type="text">
</div>

• CC 匹配的正则表达式取自这里：https://stackoverflow.com/a/5911300/12685812
• 您可以从这里获取信用卡号进行测试：https://www.paypalobjects.com/en_AU/vhelp/paypalmanager_help/credit_card_numbers.htm