1

または.bind('keyup', function() { });の文字をカウントするために を使用する方法を完全に理解していますが、入力しているときに結果を確認できるように関数を実行しようとしました。キーを離した後。textareainputkeydown

var input = $('textarea#input');
$('span#character-count').text(input.val().length);

input.bind('keydown', function() {
    $('span#character-count').text(input.val().length + 1);
});

私の現在の方法には欠陥があります：

  • すべてを選択して削除を押すと、カウントが台無しになります。
  • ライブ ビューを表示するには +1 が必要です

jsFiddle: http://jsfiddle.net/rdvR7/

4

2 に答える 2

5

キーを押している間、瞬間的に間違っていても、キーアップの正確なカウントはより良いことをお勧めします。実際には、ユーザーは同じ文字を繰り返す必要がないため、シングルを保持する傾向がないためです。キーを押すと、コードがシンプルになります。しかし、キーダウンが必要な場合は...

「ライブビューを表示するには+1が必要です」

これは、キーダウンイベントの処理中のフィールドの現在の値に、キーストロークに関連する変更が含まれていないためだと思います。変更があった場合、変更を元に戻さずにキーダウンイベントをキャンセルすることはできません。

これを回避する簡単な方法は、キーダウンイベントが終了するまでカウントの更新を遅らせることです。おそらく次のようになります。

var input = $('textarea#input'),
    count = $('span#character-count').text(input.val().length);

input.bind('keydown', function() {
    setTimeout(function() {
       count.text(input.val().length);
    },4);
});

更新されたデモ：http：//jsfiddle.net/nnnnnn/rdvR7/2/

ユーザーは、キーボードイベントをまったくトリガーせずに（ドラッグアンドドロップまたはカットアンドペーストを使用して）テキストを追加または削除できることに注意してください。

于 2013-03-24T03:36:42.687 に答える
0

ユーザーがテキストエリアでテキストを選択したときに「keyup」イベントをバインドします。

var input = $('textarea#input');
$('span#character-count').text(input.val().length);

input.bind('keydown', function(e) {
    $('span#character-count').text(0);
    input.select( function () {
        input.bind('keyup', function(e) {
            $('span#character-count').text(input.val().length);
        })
    });
    $('span#character-count').text(input.val().length);
});

Jsfiddle: http://jsfiddle.net/glenswift/SEBLD/1/

「キーダウン」と「キーアップ」のバインディングを組み合わせることもできます。

var input = $('textarea#input'),
    firstInput = true;
$('span#character-count').text(input.val().length);
input.bind('keydown, keyup', function(e) {
    $('span#character-count').text(0);
    $('span#character-count').text(input.val().length);
});

Jsfiddle: http://jsfiddle.net/glenswift/L6DR8/1/

于 2013-03-24T03:17:14.280 に答える