计算文本区域字符

关键词：

【中文标题】计算文本区域字符【英文标题】：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>

【讨论】：

文本区域计数字符验证

...【问题描述】：我正在使用vb.net编写一个asp页面，我需要计算我的textarea中的字符数并显示消息：“XcharactersRemaining。”这是我的ASP代码：<tdvalign=\'top\'><textarearows="5"id="content_t 查看详情

文本区域字符限制

】文本区域字符限制【英文标题】：textareacharacterlimit【发布时间】：2011-07-2819:56:18【问题描述】：我希望能够限制文本区域中的字符数。我使用的方法在GoogleChrome中效果很好，但在Firefox中速度很慢，并且在IE中不起作用。Javascri... 查看详情

将字符串拉入文本区域[重复]

】将字符串拉入文本区域[重复]【英文标题】：pullingastringintoatextarea[duplicate]【发布时间】：2016-04-1116:45:52【问题描述】：如何将变量中的字符串输入到文本区域中？当我使用它时，它会带来很好的价值。但需要有一个文本区域... 查看详情

jquery文本区域长度计数？

】jquery文本区域长度计数？【英文标题】：jquerytextarealengthcount?【发布时间】：2011-05-2906:18:19【问题描述】：我有一个文本区域字段，当用户在该字段中输入一些文本时，我需要提供有关字数的信息。该字段的长度应为500个字符... 查看详情

Java：拆分字符串并将它们放入文本区域的

】Java：拆分字符串并将它们放入文本区域的【英文标题】：Java:Splitstringsandputthemintotextarea\'s【发布时间】：2013-03-0300:34:16【问题描述】：我有一种方法可以将名称及其分数保存到文本文件中。现在我做了一个“高分”按钮，调... 查看详情

具有字符数的角文本区域：文本崩溃到字符数

】具有字符数的角文本区域：文本崩溃到字符数【英文标题】：Angulartextareawithcharactercount:textcrashesintocharnum【发布时间】：2021-12-2110:23:42【问题描述】：我的Angular项目中有一个文本区域，其框架（右下角）内部有一个字符数。插... 查看详情

Javascript通过“输入”计算文本区域内的文本数量

】Javascript通过“输入”计算文本区域内的文本数量【英文标题】：Javascripttocountnumberoftextswithintextareaby"enter"【发布时间】：2016-12-1321:53:27【问题描述】：您能否告知如何通过按“enter”来计算textarea中的文本数量。Textarea... 查看详情

useRef 用于显示文本区域内的字符数

】useRef用于显示文本区域内的字符数【英文标题】：useRefforshowingthecountofcharactersinsideatextarea【发布时间】：2022-01-2400:21:44【问题描述】：具有以下组件：importReactfrom\'react\';exportinterfaceTexareaPropsextendsReact.TextareaHTMLAttributes<HTMLText... 查看详情

禁止在文本区域输入某些字符

】禁止在文本区域输入某些字符【英文标题】：Disableinputofcertaincharactersintextarea【发布时间】：2021-04-2017:54:32【问题描述】：所以我有一个textArea，我不能让用户在上面输入\'%\'；为了解决这个问题，我做了以下事情：html:<divcla... 查看详情

淘汰文本区域值绑定显示换行符的 ASCII 字符？

】淘汰文本区域值绑定显示换行符的ASCII字符？【英文标题】：knockouttextareavaluebindingshowsASCIIcharactersforlinebreaks?【发布时间】：2019-09-1504:33:51【问题描述】：我有一个像这样绑定文本区域的淘汰赛值：<textareaclass="form-control"data-b... 查看详情

Vuetify 文本区域为空或少于 200 个字符的规则

】Vuetify文本区域为空或少于200个字符的规则【英文标题】：Vuetifytext-areaemptyORlessthan200characterrule【发布时间】：2019-12-0506:04:16【问题描述】：我正在使用Vuetify并试图让一个文本区域仅在超过200个字符时进行验证。我只想让该字... 查看详情

检测天气用户点击文本区域内的文本或空白区域

...空白或文本。我唯一能想到的就是使用字符宽度和行高来计算，我想避 查看详情

如何使用字符计数器和最大长度构建文本区域？

】如何使用字符计数器和最大长度构建文本区域？【英文标题】：Howtobuildatextareawithcharactercounterandmaxlength?【发布时间】：2012-10-1013:26:42【问题描述】：请考虑thisjsfiddle。它包含以下内容：<textareadata-bind="value:comment,valueUpdate:\'af... 查看详情

文本区域中的光标位置（字符索引，不是 x/y 坐标）

】文本区域中的光标位置（字符索引，不是x/y坐标）【英文标题】：Cursorpositioninatextarea(characterindex,notx/ycoordinates)【发布时间】：2010-12-2520:59:32【问题描述】：如何使用jQuery获取插入符号在文本区域中的位置？我正在寻找光标与... 查看详情

如何使用 AngularJs 从输入或文本区域中删除特殊字符？

】如何使用AngularJs从输入或文本区域中删除特殊字符？【英文标题】：HowtoremovespecialcharacterfrominputortextareausingAngularJs?【发布时间】：2018-12-1401:13:54【问题描述】：我正在尝试实现AngularJs指令以从输入和文本区域中删除任何特殊... 查看详情

当文本区域的值为空字符串时将其设置为空？

】当文本区域的值为空字符串时将其设置为空？【英文标题】：Settingatextareatonullwhenitsvalueisanemptystring?【发布时间】：2020-06-0600:45:34【问题描述】：我有一堆由循环生成的文本区域，虽然我可以将初始值设置为null，但如果用户键... 查看详情

如何使用 MySQL 在 PHP 中创建不断更新的文本区域？

...入一个字符时，它都会被保存并实时显示在另一个用户的计算机上。我不知道该怎么做。有人可以帮忙吗？我有一些代码可以分享，但老实说这不值得，如果有 查看详情

基于Javascript中的换行符解析子字符串中的文本区域

】基于Javascript中的换行符解析子字符串中的文本区域【英文标题】：parseatextareainsubstringsbasedonlinebreaksinJavascript【发布时间】：2011-04-1713:54:22【问题描述】：我有一个需要解析的文本区域。每条新线都需要拔出，并需要对其进行... 查看详情