javascript - 计算文本区域字符

Question

我正在为这个 website 上的文本区域开发字符计数.现在，它说NaN，因为它似乎没有找到字段中有多少个字符的长度，开头是0，所以数字应该是500。在chrome开发者工具的控制台中，没有错误发生。我所有的代码都在网站上，我什至尝试使用 jQuery 和常规 JavaScript 来计算文本区域字段的字符数，但似乎没有任何效果。

请告诉我我在 contact.js 文件中的 jQuery 和 JavaScript 代码中做错了什么。

$(document).ready(function() {
    var tel1 = document.forms["form"].elements.tel1;
    var tel2 = document.forms["form"].elements.tel2;
    var textarea = document.forms["form"].elements.textarea;
    var clock = document.getElementById("clock");
    var count = document.getElementById("count");

    tel1.addEventListener("keyup", function (e){
        checkTel(tel1.value, tel2);
    });

    tel2.addEventListener("keyup", function (e){
        checkTel(tel2.value, tel3);
    });

    /*$("#textarea").keyup(function(){
        var length = textarea.length;
        console.log(length);
        var charactersLeft = 500 - length;
        console.log(charactersLeft);
        count.innerHTML = "Characters left: " + charactersLeft;
        console.log("Characters left: " + charactersLeft);
    });​*/

    textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
});

function checkTel(input, nextField) {
    if (input.length == 3) {
        nextField.focus();
    } else if (input.length > 0) {
        clock.style.display = "block";
    } 
}

function textareaLengthCheck(textarea) {
    var length = textarea.length;
    var charactersLeft = 500 - length;
    count.innerHTML = "Characters left: " + charactersLeft;
}

Answer 1

$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

以上将做你想做的。如果您想倒计时，请将其更改为:

$("#textarea").keyup(function(){
  $("#count").text("Characters left: " + (500 - $(this).val().length));
});

或者，您可以使用以下代码在不使用 jQuery 的情况下完成同样的事情。 (感谢@Niet)

document.getElementById('textarea').onkeyup = function () {
  document.getElementById('count').innerHTML = "Characters left: " + (500 - this.value.length);
};