Question

使用JavaScript，我想调用一个匿名函数来检查每个onkeyup事件的字符串长度。当字符串长度等于9时，条件语句将执行一段代码。我做错了什么？

<input type="text" id="length_test" placeholder="Enter text here..." />

var length_test = document.getElementById('length_test');
var string_value = document.getElementById('length_test').value;
var x = 9;

length_test.onkeyup = function () {
        if (string_value.length == x) {
        // execute code here...
        }
    }

Answer 1

尝试以下内容。

注意：下面的示例使用JQuery。如果你没有等到使用JQuery就好了。

您可以使用以下内容进行本地操作。

document.getElementById("length_test").addEventListener("keyup", myFunction);

然后你需要创建一个名为myFunction的函数，其中包含if语句。

＆＃13;

$(document).ready(function() {
    $("#length_test").on("keyup", function(event) {
      if (event.currentTarget.value.length == 9) {
        //do your logic here
        alert("length is 9");
      }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="length_test" placeholder="Enter text here..." />

＆＃13;

Answer 2

document.getElementById返回一个活动节点。这意味着发生在页面中实际元素的任何更改都将反映在对象上。当您在字段中编写其他内容时，元素的value属性会更新。但是，string_value中存储的值不会更新，因为它只是一个很好的旧字符串，而不是某种实时对象。

另一种看待它的方式是 var string_value = document.getElementById('length_test').value;
复制元素.value并将其存储在string_value中（即使它不完全是如何工作的）。当您输入输入时，它会更新.value但不更新string_value变量。

但你应该做的是：

document.getElementById('length_test').addEventListener("keyup", function(e) {
  if(e.target.value.length === 9) {
    alert("length is 9");
  }
});

这样做要好得多，因为document.getElementById在绑定事件时只执行一次。事件侦听器函数可以通过第一个参数（通常名为e）来修复事件。 e.target是调用事件的元素，在本例中是输入元素。

Answer 3

你可以尝试：

<input type="text" id="length_test" placeholder="Enter text here..." onkeyup="keyupFunction()">
<script type = "text/javascript">
    keyupFunction function () {
        if(document.getElementById('length_test').value == 9) {
            // execute code here...
        }
    }
</script>

或者，您可以使用javascript将事件侦听器添加到input元素：

<input type="text" id="length_test" placeholder="Enter text here...">
<script type = "text/javascript">
    document.getElementById('length_test').addEventListener("keyup", function(evt) {
        if(document.getElementById('length_test').value == 9) {
            // execute code here...
        }
    });
</script>

如何计算字符串长度，如果长度等于X，那么执行代码？ - JavaScript

3 个答案: