textarea 计算字符长度错误答案

【问题标题】：textarea counts characters length wrongtextarea 计算字符长度错误
【发布时间】：2018-02-01 12:42:46
【问题描述】：

当我在 textarea 中输入第一个字符时，它仍然显示 0，第二个字符的 count 为 1。不知道为什么？我正在为此使用 keydown 事件。

$(".textArea").keydown(updateCount());

function updateCount() {
    count = $(".textArea").val().length;
    this.$countDiv.text(count + " of 240");
};

【问题讨论】：

如果使用keyup事件呢？使用 keyup 事件
keydown 在您按下键时计数。试试 keyup！

标签： javascript jquery textarea

【解决方案1】：

使用input 事件。这将涵盖对文本框值的所有更改，包括复制和粘贴等（即使使用鼠标）...

$("#text").on("input", updateCount);

function updateCount() {
    count = $("#text").val().length;
    $("#count").text(count + " of 240");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="text"></textarea>
<div id="count"></div>

还有一些其他问题，例如您执行了 updateCount 函数，而不是将其分配给事件处理程序（函数名称后有 ()。如果删除它，则它会成为引用到函数，而不是在那里执行它）。

我还为 textarea 元素使用了一个 id，而不是一个类，但这只是我的 - 如果一个类在您的场景中有效，那很好。

【讨论】：

完美的答案，它很简单，可以满足操作人员的要求。

【解决方案2】：

对于您尝试实现的用例，keydown 事件是不够的。您必须使用 keyup 事件。至此按键完成。

问候。

【讨论】：

【解决方案3】：

您需要将函数传递给$.keydown，而不是执行结果：

$(".textArea").keydown(updateCount);

function updateCount() {
    count = $('.textArea').val().length;
    this.$countDiv.text(count + ' of 240');
}

当你传递执行结果时，它必须在keydown处理之前执行。因为keydown取决于updateCount的执行结果，所以updateCount总是在keydown之前执行，所以你得到了keydown之前的字符串状态长度。

【讨论】：

keydown 在按下键之前触发，这将解决 count 的错误值

【解决方案4】：

$(".textArea").on('keydown', function(event) {
     updateCount();
 });

function updateCount() {
var count = $(".textArea").val().length;
console.log("count",count);
}

【讨论】：

您应该始终致力于解释您所做的更改以及更改的原因

【解决方案5】：

在所有 3 次更改按键粘贴上触发事件。如果有人试图粘贴到文本框中，它也会处理如下所示

$('.textArea').on('change keyup paste', updateCount());

【讨论】：