使用 JavaScript 的 Textarea 字符计数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14086546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Textarea Character Count using JavaScript
提问by Ilan Biala
I am implementing a character count for my form's textarea field. I have jQuery currently counting and writing my character statement using this code:
我正在为表单的 textarea 字段实现字符计数。我有 jQuery 当前使用以下代码计算和编写我的字符语句：
$("#textarea").keyup(function(){
$("#count").text("Characters left: " + (500 - $(this).val().length));
});
However, I would like to know what is wrong with my JavaScript:
但是，我想知道我的 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;
}
The variable declaration and the event listener are in a jQuery document ready function. I am not sure what I am doing wrong for my event listener or function then.
变量声明和事件侦听器位于 jQuery 文档就绪函数中。我不确定我的事件侦听器或函数做错了什么。
Thanks
谢谢
回答by wazz3r
The variable textareais not present in the function's scope, you can refere to it with the thiskeyword
该变量textarea不存在于函数的作用域中，您可以使用this关键字来引用它
function textareaLengthCheck() {
var length = this.value.length;
var charactersLeft = 500 - length;
var count = document.getElementById('count');
count.innerHTML = "Characters left: " + charactersLeft;
}
回答by Pointy
The handler in your code is not passed the element involved with the event. It's passed an event object. Because you declared the function with a parameter, that hides the variable declared in the outer scope.
代码中的处理程序未传递与事件相关的元素。它传递了一个事件对象。因为您使用参数声明了函数，所以隐藏了在外部作用域中声明的变量。
The problem is here:
问题在这里：
function textareaLengthCheck(textarea) {
You've included a parameter named "textarea" in the function definition. That will be what the symbol means inside the function, so the outer variable also called "textarea" won't be visible inside that function.
您已经在函数定义中包含了一个名为“textarea”的参数。这就是符号在函数内部的含义，因此外部变量也称为“textarea”在该函数内部不可见。
Be aware that Firefox, Chrome, and Safari all report an incorrect length for <textarea>values. Those browsers report the length of the textarea as if all explicit line breaks (that is, places where the user hit the "Enter" key) as one character. In fact, when the browsers post a form with a <textarea>in it, all explicit line breaks are converted to two-character sequences (carriage return and line feed). Thus, if you're imposing a maximum length in order to prevent an overflow at the server, it won't work unless you treat line breaks as two characters. To do that, you have to take the value's length, and then add in the number of line breaks in the string (found with a regex or something).
请注意，Firefox、Chrome 和 Safari 都报告了错误的<textarea>值长度。那些浏览器将 textarea 的长度报告为所有显式换行符（即用户按下“Enter”键的位置）作为一个字符。事实上，当浏览器发布一个包含 a 的表单<textarea>时，所有显式换行符都会转换为两个字符的序列（回车和换行）。因此，如果您强加最大长度以防止服务器溢出，除非您将换行符视为两个字符，否则它将无法工作。为此，您必须取值的长度，然后在字符串中添加换行符的数量（使用正则表达式或其他东西找到）。
回答by kebyang
since you are using jquery
因为您使用的是 jquery
how about a plugin
插件怎么样
http://keith-wood.name/maxlength.html
http://keith-wood.name/maxlength.html
$("#limited-textarea").maxlength({
max: 400
});
回答by Manish Kumar Jaiswal MJ
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>