使用 JavaScript 的 Textarea 字符计数答案

【问题标题】：Textarea Character Count using JavaScript使用 JavaScript 的 Textarea 字符计数
【发布时间】：2012-12-29 22:40:02
【问题描述】：

我正在为表单的 textarea 字段实现字符计数。我目前有 jQuery 使用此代码计算和编写我的字符语句：

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

但是，我想知道我的 JavaScript 出了什么问题：

var textarea = document.forms["form"].elements.textarea;

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

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

变量声明和事件监听器在一个 jQuery 文档就绪函数中。我不确定我在为我的事件侦听器或函数做错了什么。

谢谢

【问题讨论】：

标签： javascript jquery textarea addeventlistener charactercount

【解决方案1】：

变量textarea不在函数作用域内，你可以用this关键字引用它

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

【讨论】：

这个结果在控制台和实际打印输出中给出了 undefined，其他东西不起作用。
对不起，我刚刚复制了你的代码。您需要使用this.value 来获取实际内容。我已经更新了我的答案。

【解决方案2】：

您代码中的处理程序未传递与事件相关的元素。它传递了一个事件对象。因为您使用参数声明了函数，所以隐藏了在外部范围中声明的变量。

问题出在这里：

function textareaLengthCheck(textarea) {

您在函数定义中包含了一个名为“textarea”的参数。这就是符号在函数内部的含义，因此也称为“textarea”的外部变量在该函数内部不可见。

请注意，Firefox、Chrome 和 Safari 都报告 <textarea> 值的长度不正确。这些浏览器报告文本区域的长度，就好像所有显式换行符（即用户按“Enter”键的位置）作为一个字符。事实上，当浏览器发布一个包含<textarea> 的表单时，所有显式换行符都会转换为两个字符序列（回车和换行）。因此，如果您为了防止服务器溢出而设置最大长度，则除非您将换行符视为两个字符，否则它将不起作用。为此，您必须获取值的长度，然后在字符串中添加换行符的数量（通过正则表达式或其他方式找到）。

【讨论】：

@IlanBiala 对我来说看起来不错 :-) 但是我对其进行了编辑以添加特定问题。
没有通过...是什么意思？
@IlanBiala 在调用事件处理程序时，浏览器会传递一个事件对象作为参数。它不传递与事件有关的元素（好吧，传递的是元素，但作为事件对象的属性）。你的代码写得好像参数是 DOM 元素本身，但它不是。

【解决方案3】：

因为你使用的是 jquery

插件怎么样

http://keith-wood.name/maxlength.html

$("#limited-textarea").maxlength({
    max: 400
});

【讨论】：

抱歉，6 行 vs 3 行和一个额外的文件并不是一个好的交易，不过想法不错，对于更困难或更密集的事情，一个好的插件可以解决问题

【解决方案4】：

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

【讨论】：