jQuery 计算textarea中的字符数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5371089/
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
Count characters in textarea
提问by Kyle
I want to count characters in a textarea, so I just made:
我想计算 textarea 中的字符数，所以我做了：
<textarea id="field" onkeyup="countChar(this)"></textarea>
function countChar(val){
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$('#charNum').text(500 - len);
}
};
What's wrong with my piece of code? It does not work! Well, that was a newbie handwriting, need a help.
我的一段代码有什么问题？这是行不通的！嗯，这是一个新手的笔迹，需要帮助。
回答by Caterham
What errors are you seeing in the browser? I can understand why your code doesn't work if what you posted was incomplete, but without knowing that I can't know for sure.
您在浏览器中看到了哪些错误？如果您发布的内容不完整，我可以理解为什么您的代码不起作用，但不知道我无法确定。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$('#charNum').text(500 - len);
}
};
</script>
</head>
<body>
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>
</body>
</html>
... works fine for me.
...对我来说很好用。
Edit: You should probably clear the charNum div, or write something, if they are over the limit.
编辑：您可能应该清除 charNum div，或者写一些东西，如果它们超过了限制。
回答by keithics
Improved version based on Caterham's function:
基于Caterham 函数的改进版本：
$('#field').keyup(function () {
var max = 500;
var len = $(this).val().length;
if (len >= max) {
$('#charNum').text(' you have reached the limit');
} else {
var char = max - len;
$('#charNum').text(char + ' characters left');
}
});
回答by Etienne Martin
?? The accepted solution is flawed.
?? 公认的解决方案是有缺陷的。
Here are two scenarios where the keyupevent will not get fired:
以下是keyup不会触发事件的两种情况：
- The user drags text into the textarea.
- The user copy-paste text in the textarea with a right click (contextual menu).
- 用户将文本拖入文本区域。
- 用户通过右键单击（上下文菜单）在 textarea 中复制粘贴文本。
Use the HTML5 inputevent instead for a more robust solution:
改用 HTML5input事件以获得更强大的解决方案：
<textarea maxlength='140'></textarea>
JavaScript (demo):
JavaScript（演示）：
const textarea = document.querySelector("textarea");
textarea.addEventListener("input", event => {
const target = event.currentTarget;
const maxLength = target.getAttribute("maxlength");
const currentLength = target.value.length;
if (currentLength >= maxLength) {
return console.log("You have reached the maximum number of characters.");
}
console.log(`${maxLength - currentLength} chars left`);
});
And if you absolutely want to use jQuery:
如果你绝对想使用 jQuery：
$('textarea').on("input", function(){
var maxlength = $(this).attr("maxlength");
var currentLength = $(this).val().length;
if( currentLength >= maxlength ){
console.log("You have reached the maximum number of characters.");
}else{
console.log(maxlength - currentLength + " chars left");
}
});
回答by fatsouls32
this worked fine for me.
这对我来说很好。
$('#customText').on('keyup', function(event) {
var len = $(this).val().length;
if (len >= 40) {
$(this).val($(this).val().substring(0, len-1));
}
});
回答by humugus
HTML sample, used wherever I need a counter, notice the relevance of IDs of textarea and second span : id="post"<-> id="rem_post"and the title of the span that holds the desired characters amount of each particular textarea
HTML 示例，在我需要计数器的任何地方使用，注意 textarea 和第二个 span 的 ID 的相关性：id="post"<->id="rem_post"以及保存每个特定 textarea 所需字符数量的 span 的标题
<textarea class="countit" name="post" id="post"></textarea>
<p>
<span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>
JavaScript function, usually placed before </body>in my template file, requires jQuery
JavaScript 函数，通常放在</body>我的模板文件之前，需要 jQuery
$(".countit").keyup(function () {
var cmax = $("#rem_" + $(this).attr("id")).attr("title");
if ($(this).val().length >= cmax) {
$(this).val($(this).val().substr(0, cmax));
}
$("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);
});
回答by mattsven
回答by Elkingphp
HTML
HTML
<form method="post">
<textarea name="postes" id="textAreaPost" placeholder="Write what's you new" maxlength="500"></textarea>
<div id="char_namb" style="padding: 4px; float: right; font-size: 20px; font-family: Cocon; text-align: center;">500 : 0</div>
</form>
jQuery
jQuery
$(function(){
$('#textAreaPost').keyup(function(){
var charsno = $(this).val().length;
$('#char_namb').html("500 : " + charsno);
});
});
回答by Youssef
Well, this is not that different from what have been said, but this works very well in all browsers.
嗯，这与所说的没有什么不同，但这在所有浏览器中都非常有效。
The idea is to delete any text which overflows the defined length.
这个想法是删除任何超出定义长度的文本。
function countTextAreaChar(txtarea, l){
var len = $(txtarea).val().length;
if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
else $('#charNum').text(l - len);
}
The HTMl code would be:
HTML 代码将是：
<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>
回答by Sk8erPeter
I created my own jQuery plugin for this task, you can try it out here:
我为此任务创建了自己的 jQuery 插件，您可以在这里尝试：
http://jsfiddle.net/Sk8erPeter/8NF4r/
http://jsfiddle.net/Sk8erPeter/8NF4r/
You can create character counters on-the-fly (and also remaining character counters), you can define whether you want to chop text, you can define the suffix texts and you can also define a short format and its separator.
您可以即时创建字符计数器（以及剩余的字符计数器），可以定义是否要截断文本，可以定义后缀文本，还可以定义短格式及其分隔符。
Here's an example usage:
这是一个示例用法：
$(document).ready(function () {
$('#first_textfield').characterCounter();
$('#second_textfield').characterCounter({
maximumCharacters: 20,
chopText: true
});
$('#third_textfield').characterCounter({
maximumCharacters: 20,
shortFormat: true,
shortFormatSeparator: " / ",
positionBefore: true,
chopText: true
});
$('#fourth_textfield').characterCounter({
maximumCharacters: 20,
characterCounterNeeded: true,
charactersRemainingNeeded: true,
chopText: false
});
$('#first_textarea').characterCounter({
maximumCharacters: 50,
characterCounterNeeded: true,
charactersRemainingNeeded: false,
chopText: true
});
$('#second_textarea').characterCounter({
maximumCharacters: 25
});
});
Here's the code of the plugin:
这是插件的代码：
/**
* Character counter and limiter plugin for textfield and textarea form elements
* @author Sk8erPeter
*/
(function ($) {
$.fn.characterCounter = function (params) {
// merge default and user parameters
params = $.extend({
// define maximum characters
maximumCharacters: 1000,
// create typed character counter DOM element on the fly
characterCounterNeeded: true,
// create remaining character counter DOM element on the fly
charactersRemainingNeeded: true,
// chop text to the maximum characters
chopText: false,
// place character counter before input or textarea element
positionBefore: false,
// class for limit excess
limitExceededClass: "character-counter-limit-exceeded",
// suffix text for typed characters
charactersTypedSuffix: " characters typed",
// suffix text for remaining characters
charactersRemainingSuffixText: " characters left",
// whether to use the short format (e.g. 123/1000)
shortFormat: false,
// separator for the short format
shortFormatSeparator: "/"
}, params);
// traverse all nodes
this.each(function () {
var $this = $(this),
$pluginElementsWrapper,
$characterCounterSpan,
$charactersRemainingSpan;
// return if the given element is not a textfield or textarea
if (!$this.is("input[type=text]") && !$this.is("textarea")) {
return this;
}
// create main parent div
if (params.characterCounterNeeded || params.charactersRemainingNeeded) {
// create the character counter element wrapper
$pluginElementsWrapper = $('<div>', {
'class': 'character-counter-main-wrapper'
});
if (params.positionBefore) {
$pluginElementsWrapper.insertBefore($this);
} else {
$pluginElementsWrapper.insertAfter($this);
}
}
if (params.characterCounterNeeded) {
$characterCounterSpan = $('<span>', {
'class': 'counter character-counter',
'text': 0
});
if (params.shortFormat) {
$characterCounterSpan.appendTo($pluginElementsWrapper);
var $shortFormatSeparatorSpan = $('<span>', {
'html': params.shortFormatSeparator
}).appendTo($pluginElementsWrapper);
} else {
// create the character counter element wrapper
var $characterCounterWrapper = $('<div>', {
'class': 'character-counter-wrapper',
'html': params.charactersTypedSuffix
});
$characterCounterWrapper.prepend($characterCounterSpan);
$characterCounterWrapper.appendTo($pluginElementsWrapper);
}
}
if (params.charactersRemainingNeeded) {
$charactersRemainingSpan = $('<span>', {
'class': 'counter characters-remaining',
'text': params.maximumCharacters
});
if (params.shortFormat) {
$charactersRemainingSpan.appendTo($pluginElementsWrapper);
} else {
// create the character counter element wrapper
var $charactersRemainingWrapper = $('<div>', {
'class': 'characters-remaining-wrapper',
'html': params.charactersRemainingSuffixText
});
$charactersRemainingWrapper.prepend($charactersRemainingSpan);
$charactersRemainingWrapper.appendTo($pluginElementsWrapper);
}
}
$this.keyup(function () {
var typedText = $this.val();
var textLength = typedText.length;
var charactersRemaining = params.maximumCharacters - textLength;
// chop the text to the desired length
if (charactersRemaining < 0 && params.chopText) {
$this.val(typedText.substr(0, params.maximumCharacters));
charactersRemaining = 0;
textLength = params.maximumCharacters;
}
if (params.characterCounterNeeded) {
$characterCounterSpan.text(textLength);
}
if (params.charactersRemainingNeeded) {
$charactersRemainingSpan.text(charactersRemaining);
if (charactersRemaining <= 0) {
if (!$charactersRemainingSpan.hasClass(params.limitExceededClass)) {
$charactersRemainingSpan.addClass(params.limitExceededClass);
}
} else {
$charactersRemainingSpan.removeClass(params.limitExceededClass);
}
}
});
});
// allow jQuery chaining
return this;
};
})(jQuery);
回答by DJH
I did a combination of the above. It allows for the halting of the text entry, and allows for the backspacing, plus keeps the count, even when backspacing:
我做了以上的组合。它允许停止文本输入，并允许退格，加上保持计数，即使在退格时也是如此：
JavaScript code:
JavaScript 代码：
$(document).ready(function () {
$('#giftmsg').keypress(function (event) {
var max = 250;
var len = $(this).val().length;
if (event.which < 0x20) {
// e.which < 0x20, then it's not a printable character
// e.which === 0 - Not a character
return; // Do nothing
}
if (len >= max) {
event.preventDefault();
}
});
$('#giftmsg').keyup(function (event) {
var max = 250;
var len = $(this).val().length;
var char = max - len;
$('#textleft').text(char + ' characters left');
});
});
HTML:
HTML：
<div class="col3">
<h2>3. Optional gift message</h2>
Enter gift message. Limit 250 characters.<br /><br />
<textarea cols="36" rows="5" id="giftmsg" ></textarea>
<a style="padding:7px 0 0 0" href="#">Save Message</a>
<div id="textleft">250 characters left</div>
</div>
Credit to those posters before me!! Hope this helps someone!
归功于我面前的那些海报！！希望这可以帮助某人！
