计算文本区域字符

Question

我正在这个website 上为我的文本区域开发字符数。现在，它说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. 用户将文本拖入文本区域。
2. 用户通过右键单击（上下文菜单）在文本区域中复制粘贴文本。

使用 HTML5 input 事件来获得更强大的解决方案：

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

JavaScript (demo)：

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 是实际的文本区域，而不是值。试试这个：

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

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

DEMO>

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>

Answer 6

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

要放入表单的文本区域和消息容器：

<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

我发现接受的答案并不完全适用于textareas，原因是Chrome counts characters wrong in textarea with maxlength attribute 中指出的原因是换行符和回车符，如果您需要知道何时会占用多少空间，这一点很重要将信息存储在数据库中。此外，由于从剪贴板拖放和粘贴文本，keyup 的使用被贬低，这就是我使用input 和propertychange 事件的原因。下面考虑换行符，准确计算textarea的长度。

$(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);

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

Answer 8

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

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

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>