javascript - Write how manu characters left in textbox

Question

I have a textbox with a max value of 10, and I want #pid p tag to write the number of remaining characters.

html:

<textarea id="content" maxlength="10"></textarea>
<p id="pid">max 10 chars</p>

javascript:

var content = document.getElementById('content');

var pid = document.getElementById('pid');

function charsLeft() {

    for (var i = 10; i >= 1; i--) {

    contentCount = 10;

    pid.innerHTML = parseInt(contentCount - 1);

    }

}

content.onkeypress = charsLeft;

All i managed to do is that when I start typing, i see 9, but as I keep typing it stays as 9.

fiddle

I want to do this with pure JS, no libraries.

Answer 1

function charsLeft() {
    pid.innerHTML = content.value.length > 0 ? content.getAttribute("maxlength") - content.value.length + " chars left" : "max 10 chars";
}
content.onkeyup = charsLeft;

见演示。

Answer 2

您可以使用“keyup”-Event

document.getElementById("mybox").addEventListener("keyup", calcRemainingChars)

http://jsfiddle.net/XHgQy/

Answer 3

jQuery

$('document').ready(function(){
    var text_max = $('#content').attr('maxlength');
    $('#pid').html(text_max+' characters remaining');
    
    $('#content').keyup(function(){
     var text_length =$('#content').val().length;
     var text_remaining =text_max - text_length;
    // alert(text_remaining + ' ' +text_length + ' ' +text_max);
     $('#pid').html(text_remaining+' characters remaining');
    });
});

Answer 4

那么你的错误是你每次调用你的函数时都重新声明你的评论计数。你必须让你的评论成为一个全局变量。

修复您的版本以计算字符：

var content = document.getElementById('content'),
    contentCount = 10;

function charsLeft() {
    var pid = document.getElementById('pid');

    for (var i = 10; i >= 1; i--) {
    pid.innerHTML = parseInt(contentCount - 1);

    }

}    
content.onkeypress = charsLeft;

但是，我没有；建议您创建一个全局变量来计算字符数。在您的方法中，不考虑“退格”给出不准确的计数。我建议您计算字符数量的方法是调用“长度”成员。

我的建议

var content = document.getElementById('content');

function charsLeft() {
    var pid = document.getElementById('pid');
    pid.innerHTML = (content.value.length > 0 ? content.value.length + " chars left!" : "max 10 chars");
}
content.onkeypress = charsLeft;

小提琴