写下文本框中剩余的字符数

Question

我有一个最大值为10的文本框，我希望#pid p tag写出剩余字符数。

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;

我设法做的就是当我开始输入时，我看到9，但是当我继续输入时，它保持为9。

fiddle

我想用纯JS做这个，没有库。

Answer 1

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

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

请参阅DEMO。

Answer 3

您可以使用“keyup”-Event

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

http://jsfiddle.net/XHgQy/

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;

但是，我没有;建议你创建一个全局变量来计算字符数。在您的方法中，“退格”不被视为给出不准确的计数。我建议你计算字符数量的方法是调用'length'成员。

我的建议

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;

Fiddle