计算 textarea 字符

IT技术 javascript jquery html textarea charactercount
2021-02-19 13:30:01

我正在为这个网站上的 textarea 开发一个字符数。现在说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;
}
6个回答
$("#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);
};
更新以说出您想要的内容。
2021-05-03 13:30:01
用 替换代码，document.getElementById('textarea').onkeyup = function() {document.getElementById('count').innerHTML = "Characters left: "+(500-this.value.length);};它的运行速度会快一百倍；)
2021-05-05 13:30:01
对于这个操作，我认为我们在这里谈论的只是 1-2 毫秒……所以我不太担心。
2021-05-15 13:30:01
@Cassandra 你不能在注释中做代码块。我的代码工作正常
2021-05-15 13:30:01
我希望它说“剩余字符数：xxx”xxx 是 500 或更低的数字。
2021-05-16 13:30:01

⚠️ 公认的解决方案已经过时了。

以下是keyup不会触发事件的两种情况：

  1. 用户将文本拖入文本区域。
  2. 用户通过右键单击（上下文菜单）在 textarea 中复制粘贴文本。

改用 HTML5input事件以获得更强大的解决方案：

<textarea maxlength='140'></textarea>

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`);
});

如果你绝对想使用 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");
    }
});
这是一个更好的解决方案
2021-04-20 13:30:01
我喜欢这个解决方案。谢谢！
2021-05-06 13:30:01 
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
};
是的，它包含 textarea 本身，而不是它的值。
2021-04-26 13:30:01
如果您查看我的 jquery 就绪函数的顶部，则 textarea 是我之前在 javascript 文件中创建的变量。
2021-05-15 13:30:01

这是简单的代码。希望它有效

$(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>

@Wracker 您可以on('input')在按住任意键的同时获取计数器更新
2021-05-04 13:30:01
按住任何键都不会更新计数器。所以我问它也值得为 $("#textarea")keydown( .. ) 添加另一个处理程序
2021-05-13 13:30:01

此代码从 的maxlength属性中获取最大值，textarea并随着用户键入而减小该值。

<演示>

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); }; }
2021-05-01 13:30:01
其它你可能感兴趣的问题
上一篇与该页面内的 iframe 共享页面的全局 javascript 变量 下一篇D3js 从数组而不是文件中获取数据