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

Question

我正在website为我的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事件的情况：

用户将文本拖入文本区域。
用户通过右键单击（上下文菜单）在文本区域中复制粘贴文本。

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

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

JavaScript（demo）：

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

textarea.addEventListener("input", function(){
    var maxlength = this.getAttribute("maxlength");
    var currentLength = this.value.length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        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的{{1}}属性获取最大值，并在用户输入时减小值。

<强>＆LT; DEMO＆GT;

＆＃13;

textarea

＆＃13;

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);
};

＆＃13;

Answer 6

对于那些想要一个没有jQuery的简单解决方案的人来说，这是一种方式。

textarea和消息容器放在您的表单中：

<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>

JavaScript的：

<script>
function count_it() {
    document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
}
count_it();
</script>

脚本先对字符进行计数，然后对每次按键进行计数，并将数字放在计数器范围内。

马丁

Answer 7

＆＃13;

var maxchar = 10;
$('#message').after('<span id="count" class="counter"></span>');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
	var len =  $('#message').val().length;
	if (len >= maxchar && e.keyCode != 8)
		   e.preventDefault();
	else if(len <= maxchar && e.keyCode == 8){
		if(len <= maxchar && len != 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len +1));
	   	else if(len == 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len));
	}else
		 $('#count').html(maxchar+' of '+(maxchar - len-1)); 
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message" name="text"></textarea>

＆＃13;

Answer 8

我发现，由于换行符和回车字符，Chrome counts characters wrong in textarea with maxlength attribute中提到的原因，接受的答案与textarea无法完全一致，如果您需要了解多少，这一点非常重要在将信息存储在数据库中时将占用空间。此外，由于从剪贴板拖放和粘贴文本，因此使用keyup已被折旧，这就是我使用input和propertychange事件的原因。以下内容考虑了换行符，并准确计算textarea的长度。

＆＃13;

$(function() {
  $("#myTextArea").on("input propertychange", function(event) {
    var curlen = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

    $("#counter").html(curlen);
  });
});

$("#counter").text($("#myTextArea").val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />

＆＃13;

Answer 9

    $(document).ready(function(){ 
    $('#characterLeft').text('140 characters left');
    $('#message').keydown(function () {
        var max = 140;
        var len = $(this).val().length;
        if (len >= max) {
            $('#characterLeft').text('You have reached the limit');
            $('#characterLeft').addClass('red');
            $('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            $('#characterLeft').text(ch + ' characters left');
            $('#btnSubmit').removeClass('disabled');
            $('#characterLeft').removeClass('red');            
        }
    });    
});

Answer 10

他们说IE在input事件方面存在问题，但除此之外，解决方案非常简单。

ta = document.querySelector("textarea");
count = document.querySelector("label");

ta.addEventListener("input", function (e) {
  count.innerHTML = this.value.length;
});

<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>

Answer 11

此解决方案将响应键盘和鼠标事件，并应用于初始文本。

    $(document).ready(function () {
        $('textarea').bind('input propertychange', function () {
            atualizaTextoContador($(this));
        });

        $('textarea').each(function () {
            atualizaTextoContador($(this));
        });
    });

    function atualizaTextoContador(textarea) {
        var spanContador = textarea.next('span.contador');
        var maxlength = textarea.attr('maxlength');
        if (!spanContador || !maxlength)
            return;
        var numCaracteres = textarea.val().length;
        spanContador.html(numCaracteres + ' / ' + maxlength);
    }

    span.contador {
        display: block;
        margin-top: -20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="100" rows="4">initial text</textarea>
<span class="contador"></span>

计算textarea字符

11 个答案:

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