Textarea字符计数使用JavaScript

Question

我正在为我的表单的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文档准备函数中。我不确定我做错了我的事件监听器或函数，然后。

谢谢

Answer 1

变量textarea不存在于函数的作用域中，您可以使用this关键字

引用它

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

Answer 2

代码中的处理程序没有传递与事件相关的元素。它传递了一个事件对象。因为你用形参声明了函数，这就隐藏了在外部作用域中声明的变量。

问题在这里:

function textareaLengthCheck(textarea) {

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

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

Answer 3

因为你正在使用jquery

一个插件怎么样

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

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

Answer 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>