计算文本区域字符
Posted
技术标签:
【中文标题】计算文本区域字符【英文标题】：Count textarea characters 【发布时间】：2012-12-14 17:10:38 【问题描述】：我正在这个website 上为我的文本区域开发字符数。现在，它说NaN，因为它似乎找不到字段中有多少个字符的长度，开头是0，所以数字应该是500。在chrome开发人员工具的控制台中，没有错误发生。我所有的代码都在网站上，我什至尝试使用 jQuery 和常规 javascript 来计算 textarea 字段的字符数，但似乎没有任何效果。
请告诉我在我的 contact.js 文件中的 jQuery 和 JavaScript 代码中我做错了什么。
$(document).ready(function()
var tel1 = document.forms["form"].elements.tel1;
var tel2 = document.forms["form"].elements.tel2;
var textarea = document.forms["form"].elements.textarea;
var clock = document.getElementById("clock");
var count = document.getElementById("count");
tel1.addEventListener("keyup", function (e)
checkTel(tel1.value, tel2);
);
tel2.addEventListener("keyup", function (e)
checkTel(tel2.value, tel3);
);
/*$("#textarea").keyup(function()
var length = textarea.length;
console.log(length);
var charactersLeft = 500 - length;
console.log(charactersLeft);
count.innerhtml = "Characters left: " + charactersLeft;
console.log("Characters left: " + charactersLeft);
);​*/
textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
);
function checkTel(input, nextField)
if (input.length == 3)
nextField.focus();
else if (input.length > 0)
clock.style.display = "block";
function textareaLengthCheck(textarea)
var length = textarea.length;
var charactersLeft = 500 - length;
count.innerHTML = "Characters left: " + charactersLeft;
【问题讨论】：
【参考方案1】：$("#textarea").keyup(function()
$("#count").text($(this).val().length);
);
上面会做你想要的。如果您想倒计时，请将其更改为：
$("#textarea").keyup(function()
$("#count").text("Characters left: " + (500 - $(this).val().length));
);
或者，您可以使用以下代码在不使用jQuery 的情况下完成相同的操作。 （感谢@Niet）
document.getElementById('textarea').onkeyup = function ()
document.getElementById('count').innerHTML = "Characters left: " + (500 - this.value.length);
;
【讨论】：
我想让它说“剩余字符：xxx”xxx 是 500 或更低的数字。 更新后说出你想要的。 用document.getElementById('textarea').onkeyup = function() document.getElementById('count').innerHTML = "Characters left: "+(500-this.value.length);;替换代码，它的运行速度会快一百倍;)
对于这个操作，我想我们这里说的只有1-2毫秒……所以我不太在意。
@Cassandra 你不能在 cmets 中做代码块。 My code works fine【参考方案2】：
⚠️ 接受的解决方案已过时。
以下是keyup 事件不会被触发的两种情况：
-
用户将文本拖入文本区域。
用户通过右键单击（上下文菜单）在文本区域中复制粘贴文本。
使用 HTML5 input 事件来获得更强大的解决方案：
<textarea maxlength='140'></textarea>
JavaScript (demo)：
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`);
);
如果你绝对想使用 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");
);
【讨论】：
这是一个更好的解决方案 我喜欢这个解决方案。谢谢！【参考方案3】：textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
您正在调用 textareaLengthCheck，然后将其返回值分配给事件侦听器。这就是为什么它在加载后不更新或做任何事情的原因。试试这个：
textarea.addEventListener("keypress",textareaLengthCheck,false);
除此之外：
var length = textarea.length;
textarea 是实际的文本区域，而不是值。试试这个：
var length = textarea.value.length;
结合前面的建议，你的函数应该是：
function textareaLengthCheck()
var length = this.value.length;
// rest of code
;
【讨论】：
如果您查看我的 jquery 就绪函数的顶部，textarea 是我之前在 javascript 文件中创建的变量。 是的，它包含文本区域本身，而不是它的值。【参考方案4】：这是简单的代码。希望它有效
$(document).ready(function()
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');
$('#textarea').keyup(function()
var text_length = $('#textarea').val().length;
var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>【讨论】：
它不会在按住任何键时更新计数器。所以我怀疑是否值得为 $("#textarea")keydown( .. ) 添加另一个处理程序 @Wracker 您可以使用on('input') 在按住任意键的同时获取计数器更新【参考方案5】：
此代码从textarea 的maxlength 属性中获取最大值，并随着用户键入而减小该值。
DEMO>
var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function ()
document.getElementById('count').innerHTML = (length - this.value.length);
;<textarea id="textarea" name="text"
maxlength="500"></textarea>
<span id="count"></span>【讨论】：
在元素上将<textarea onKeyUp=" 更改为<textarea onKeyDown="，因为有时第一个字符不计算在内——在我的情况下，我在同一页面中有多个文本区域，并在函数中使用了您的代码：function limitInput( id, i ) var el_t = document.getElementById( id ); var length = el_t.getAttribute( "maxlength" ); var el_c = document.getElementById( 'count-' + i ); el_c.innerHTML = length; el_t.onkeyup = function () document.getElementById( 'count-' + i ).innerHTML = (length - this.value.length); ; 【参考方案6】：
对于那些想要一个没有 jQuery 的简单解决方案的人来说，这里有一个方法。
要放入表单的文本区域和消息容器：
<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>
JavaScript：
<script>
function count_it()
document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
count_it();
</script>
脚本先对字符进行计数，然后对每次击键进行计数，并将数字放入计数器范围内。
马丁
【讨论】：
简洁优雅。谢谢你。 jQuery 很好，但我真的希望有更多像你这样的纯 javascript 解决方案。【参考方案7】：我发现接受的答案并不完全适用于textareas，原因是Chrome counts characters wrong in textarea with maxlength attribute 中指出的原因是换行符和回车符，如果您需要知道何时会占用多少空间，这一点很重要将信息存储在数据库中。此外，由于从剪贴板拖放和粘贴文本，keyup 的使用被贬低，这就是我使用input 和propertychange 事件的原因。下面考虑换行符，准确计算textarea的长度。
$(function()
$("#myTextArea").on("input propertychange", function(event)
var curlen = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;
$("#counter").html(curlen);
);
);
$("#counter").text($("#myTextArea").val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />【讨论】：
【参考方案8】：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" name="text"></textarea>【讨论】：
【参考方案9】： $(document).ready(function()
$('#characterLeft').text('140 characters left');
$('#message').keydown(function ()
var max = 140;
var len = $(this).val().length;
if (len >= max)
$('#characterLeft').text('You have reached the limit');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
else
var ch = max - len;
$('#characterLeft').text(ch + ' characters left');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
);
);
【讨论】：
【参考方案10】：他们说 IE 对 input 事件有问题，但除此之外，解决方案相当简单。
ta = document.querySelector("textarea");
count = document.querySelector("label");
ta.addEventListener("input", function (e)
count.innerHTML = this.value.length;
);<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>【讨论】：
【参考方案11】：此解决方案将响应键盘和鼠标事件，并应用于初始文本。
$(document).ready(function ()
$('textarea').bind('input propertychange', function ()
atualizaTextoContador($(this));
);
$('textarea').each(function ()
atualizaTextoContador($(this));
);
);
function atualizaTextoContador(textarea)
var spanContador = textarea.next('span.contador');
var maxlength = textarea.attr('maxlength');
if (!spanContador || !maxlength)
return;
var numCaracteres = textarea.val().length;
spanContador.html(numCaracteres + ' / ' + maxlength);
span.contador
display: block;
margin-top: -20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="100" rows="4">initial text</textarea>
<span class="contador"></span>【讨论】：
以上是关于计算文本区域字符的主要内容，如果未能解决你的问题，请参考以下文章