计算textarea字符

Question

我正在为这个网站上的textarea开发一个字符数.现在,它说NaN,因为它似乎找不到字段中有多少字符的长度,在开头是0,所以数字应该是500.在Chrome开发人员工具的控制台中,不会发生错误.我的所有代码都在网站上,我甚至尝试使用jQuery常规JavaScript来处理textarea字段的字符数,但似乎没有任何效果.

请告诉我在我的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);
};

Answer 2

⚠️已接受的解决方案已过时.

以下是两种keyup不会触发事件的方案:

1. 用户将文本拖入textarea.
2. 用户通过右键单击(上下文菜单)在textarea中复制粘贴文本.

使用HTML5 input事件代替更强大的解决方案:

<textarea maxlength='140'></textarea>

JavaScript(演示):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");
    }

    console.log(`${maxLength - currentLength} chars left`);
});

如果你绝对想使用jQuery:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

Answer 3

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

您正在调用 textareaLengthCheck然后将其返回值分配给事件侦听器.这就是加载后不更新或执行任何操作的原因.试试这个:

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

除此之外:

var length = textarea.length;

textarea是实际的textarea,而不是价值.试试这个:

var length = textarea.value.length;

结合之前的建议,您的功能应该是:

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};

Answer 4

这是简单的代码.希望它有效

$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');

$('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>

Answer 5

maxlength此代码从的属性中获取最大值，textarea并随着用户键入而减小该值。

<演示>

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};

<textarea id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count"></span>