javascript - テキストボックスに残った文字数を書く

Question

最大値が 10 のテキスト ボックスがあり、残りの文字数を #pid p タグに書き込む必要があります。

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のままになることだけです.

フィドル

これを純粋な JS で行いたいのですが、ライブラリは使用しません。

Answer 1

あなたのエラーは、関数を呼び出すたびにコメント数を再宣言することです。コメントをグローバル変数としてカウントする必要があります。

文字をカウントするためのバージョンの修正:

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;

フィドル

Answer 2

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

デモを参照してください。

Answer 3

「keyup」イベントで作業できます

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

http://jsfiddle.net/XHgQy/

Answer 4

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