计数textarea的字符(Count textarea characters)

我开发我这上textarea的字符计数的网站 。 现在，它说，NaN的，因为它似乎找不到多少个字符都在外地，这在一开始是0长度，所以数量应该是500在Chrome开发者工具的控制台，发生错误。 我所有的代码是在网站上，我甚至尝试使用jQuery一个常规的JavaScript为textarea的领域的字符数，但似乎没有任何工作。

请告诉我，我在做什么错在两个jQuery和JavaScript的代码，我在我的contact.js文件。

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

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

Answer 2:

textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);

您呼叫 textareaLengthCheck然后将其返回值分配给事件侦听器。 这就是为什么它不更新或加载后做什么。 试试这个：

textarea.addEventListener("keypress",textareaLengthCheck,false);

除此之外：

var length = textarea.length;

textarea是实际的textarea的，而不是价值。 试试这个：

var length = textarea.value.length;

与之前的建议相结合，你的功能应该是：

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};

Answer 3:

⚠️接受的解决方案已经过时。

这里有两种情况，其中keyup事件将不会被解雇：

1. 用户拖动文本到textarea的。
2. 在textarea的用户复制粘贴文本用右键点击（上下文菜单）。

使用HTML5 input事件，而不是一个更强大的解决方案：

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

JavaScript的（ 演示 ）：

var textarea = document.querySelector("textarea");

textarea.addEventListener("input", function(){
    var maxlength = this.getAttribute("maxlength");
    var currentLength = this.value.length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        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");
    }
});

Answer 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> 

Answer 5:

这个代码从最大值maxlength所述的属性textarea和减小该值作为用户类型。

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

Answer 6:

对于那些想要不jQuery的一个简单的解决方案，这里有一个方法。

textarea的和消息容器把你的表格：

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

该脚本开始，然后计数字符，每个按键并提出在柜台跨度数。

马丁

Answer 7:

 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> 

Answer 8:

我发现，公认的答案并没有完全与工作textarea S代表所指出的原因， Chrome浏览器的textarea与maxlength属性错误的字符计数因为换行符和回车符，如果你需要知道多少空间将被占用这一点很重要在数据库中存储的信息时。 此外，使用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" /> 

Answer 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');            
        }
    });    
});

Answer 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> 

Answer 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> 

文章来源: Count textarea characters