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>值的长度不正确。这些浏览器报告textarea的长度，就好像所有显式换行符（即用户点击“Enter”键的位置）作为一个字符一样。事实上，当浏览器发布一个带有<textarea>的表单时，所有显式换行符都会转换为双字符序列（回车符和换行符）。因此，如果为了防止服务器溢出而强加最大长度，除非将换行符视为两个字符，否则它将无效。要做到这一点，你必须取值的长度，然后在字符串中添加换行符的数量（用正则表达式或其他东西找到）。

Answer 3

因为你正在使用jquery

插件怎么样

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

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

Answer 4

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

＆＃13;

使用JavaScript的Textarea字符数

4 个答案: