仅在输入第一个字符时运行“keyup”

问题描述

不是绑定函数方面的专家。我创建了下面的代码片段来演示我正在尝试做什么。

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

$("#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>

解决方法

您的 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));

,

在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>

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