1

我正在为表单的 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 文档就绪函数中。我不确定我在为我的事件侦听器或函数做错了什么。

谢谢

4

4 回答 4

3

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

function textareaLengthCheck() {
    var length = this.value.length;
    var charactersLeft = 500 - length;
    var count = document.getElementById('count');
    count.innerHTML = "Characters left: " + charactersLeft;
}
于 2012-12-29T22:46:39.003 回答
2

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

问题在这里：

function textareaLengthCheck(textarea) {

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

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

于 2012-12-29T22:43:49.770 回答
0

因为您使用的是 jquery

插件怎么样

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

$("#limited-textarea").maxlength({
    max: 400
});
于 2013-04-01T13:38:30.150 回答
0 

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>

于 2017-01-27T18:42:37.940 回答