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

【问题标题】：How to count string length, if length equals X, then execute code? - JavaScript如何计算字符串长度，如果长度等于X，则执行代码？ - JavaScript
【发布时间】：2015-06-17 12:51:00
【问题描述】：

使用 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...
        }
    }

【问题讨论】：

您需要在函数中定义string_value ，以便在比较时更新
您的代码只获取输入元素的值一次。将设置“string_value”的那一行移到“keyup”处理程序内。
基本上，if(length_test.value.length == x) 因为在所有浏览器中，你的第一行什么都不做......
太棒了！那行得通。感谢 dandavis 的解释，这有助于推动这个概念。这是我在 Stack Overflow 上提出的第一个问题，我通常会通过浏览页面获得所需的答案。我迫不及待地想做出贡献。我感谢所有有意见的人。程序员的力量！

标签： javascript function anonymous-function string-length onkeyup

【解决方案1】：

试试下面的。

注意：以下示例使用 JQuery。如果您没有等待使用 JQuery，那很好。

您可以通过以下方式原生地做到这一点。

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

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

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

<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..." />

【讨论】：

这使用了 JQuery 库，这绝对不是必需的。 JQuery 不是万能的。
这很好，但它是海报的解决方案。它可以很容易地修改为不使用 Jquery。这不是投反对票的理由。
这是一个很好的答案，但是问题中没有标记 jQuery，而且您没有明确指出这是为那些不熟悉使用 javascript 的人使用 jQuery，所以是的，它值得被否决.
我应该建议编辑而不是投反对票，我的错。我只是不希望新手在最可能不需要的时候使用 JQuery。它不会让你了解 JS 的真正工作原理，而且会大大降低你的代码速度。
@JacqueGoupil 我完全同意！我喜欢使用纯 javascript，所以我对正在发生的事情有更好的了解。不要误会我的意思，jQuery 可以是一个很好的备忘单/节省时间，但如果我想深入了解某些东西的功能，我会避免使用它。

【解决方案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 是调用事件的元素，在本例中为输入元素。

【讨论】：

所以在这个例子中，动作都发生在函数内部，不需要外部变量，对吗？
没错，不过如果你想在这个函数之外使用它，你可能想把它保存在一个全局变量中。

【解决方案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 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>

【讨论】：