0

オンラインで見つけたコード スニペットを使用して charcount を実装しようとしています。1 つのテキスト領域に対して機能します。カウント制限が異なる複数のテキスト領域があります。以下は、1 つのフォームで機能するコードです。

Javascript:
function countChar(val,count,focus){

        var len = val.value.length;
    var lim=count;
    var focussed=focus;

    if (len >= lim) {

            $('#charNum').text(lim - len);
            $('#charNum').addClass('exceeded');
        /* val.value = val.value.substring(0, lim);*/   
        }else {
        if(focussed===0){
            $('#charNum').html('<a>&nbsp;</a>');
        }
                else {
            $('#charNum').text(lim - len);
            $('#charNum').removeClass('exceeded');
        }
        }
};

HTML:
<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description'  onkeyup=\"countChar(this,200,1)\" onblur=\"countChar(this,200,0)\" rows='10' cols='20'></textarea>

テキスト領域が 2 つある場合、このコードを変更して機能させるにはどうすればよいですか? スクリプトで div の ID を取得する方法は知っていますが、#charNum1 や #charNum2 などのカウンター div を正しく更新する方法がわかりません。いくつかのヒントに感謝します。ありがとう

編集：私は考えていました、それが助けになるなら、カウンターdivに「Charnum + divName」という名前を付けることができます

4

2 に答える 2

2

イベント ハンドラーを jQuery でアタッチするとthis、ハンドラー内で使用して、イベントがトリガーされた要素を参照できるため、関数内で要素 ID をハードコーディングする必要がなくなります。

許容される最大文字数で属性を追加し、インライン イベント ハンドラを削除することをお勧めします。

<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description' data-maxChars="200" rows='10' cols='20'></textarea>
<div id='charNum2' class='counter'>&nbsp;</div>
<textarea id='otherfield' name='otherfield' data-maxChars="400" rows='10' cols='20'></textarea>

それで：

$(document).ready(function() {
    $("textarea[data-maxChars]").on("keyup blur", function(e) {
        var $this = $(this),
            $counter = $this.prev(),
            len = $this.val().length,
            maxChars = +$this.attr("data-maxChars");

        $counter.text(maxChars - len).toggleClass("exceeded", len > maxChars);
    });
});

デモ: http://jsfiddle.net/nnnnnn/GTyW3/

于 2012-08-15T03:54:51.073 に答える
0

各テキストエリアに独自の div がある場合は、countChar 関数に追加のパラメーターを追加するだけで、div の名前になります。したがって、次のようになります。

function countChar(val,count,focus, charCountDiv)

次に、関数でハードコーディングする代わりに、jQuery は次のようになります。

$(charCountDiv)

それはあなたがやろうとしていると私が思うことをするはずです。

于 2012-08-15T03:52:49.487 に答える