2

シンプルなテキストボックス文字カウンター (Twitter など) に対する以下の解決策を見つけました。

単一のテキストボックスを使用するのではなく、複数のテキスト入力に対応するようにコードを修正しようとしましたが、成功しませんでした。

その理由は、URL とテキストを同じツイートとして送信する前に検証したいからです。

誰かが私を正しい方向に向けることができますか?

<span class="counter"></span>
<input type="text" name="field1" id="field1" class="word_count" />
<input type="text" name="field2" id="field2" class="word_count" />

js:

$(document).ready(function () {
    $('.word_count').each(function () {
        var $this = $(this);
        var counter = $this.parent().find('.counter');
        var maxlength = $this.attr('maxlength');

        counter.text('Only ' + maxlength + ' characters allowed');

        $this.bind('input keyup keydown', function () {
            var value = $this.val();

            if (value.length > 0) {
                counter.text((maxlength - $this.val().length) + ' characters left');
            } else {
                counter.text('Only ' + maxlength + ' characters allowed');
            }
        });
    });
});
4

1 に答える 1

4

まず第一に、ここにフィドルがあります。http://jsfiddle.net/bczengel/tsbfU/

ここに問題がありました。

  1. コードは、存在しない入力フィールドの maxLength 属性を探しています。したがって、NaN メッセージです。
  2. jQuery の最新バージョンを使用している場合は、.on() メソッドを使用する必要があります。bind 以外にもいくつかの機能がありますが、基本的には新しい方法です。
  3. すべての入力を繰り返す必要はありません。jQuery は、結果セットで見つかったすべての要素にイベントをバインドします。基本的に、入力ごとに新しい関数を作成していましたが、必要なのは 1 つだけでした。
  4. 入力を入力したときにカウンターが更新されるように、イベントのリストにフォーカスを追加しました。入力がフォーカスされていないときにカウンターを非表示にするために、個別の blur イベント ハンドラーを追加することができます。
于 2012-05-21T00:16:24.423 に答える