0

DIV で単語カウンターを実行していて、いくつかの単語を入力した後、ページがクラッシュします。ブラウザーは引き続き動作し (パー スクロール)、Chrome のコンソールにエラーは表示されません。どこが間違っているのかわからない...

すべては、「 keyup 」で「 wordCount(q);」を渡したときに始まりました。カウントダウンする数値の代わりに「NaN」を分割するため、そこに渡しただけです。

JS:

wordCount();

$('#group_3_1').click(function(){
    var spliced = 200;
    wordCount(spliced);
}) ;

$('#group_3_2').click(function(){
    var spliced = 600;
    wordCount(spliced);
}) ;

function wordCount(q) {
    var content_text = $('.message1').text(),
        char_count = content_text.length;

        if (char_count != 0) 
          var word_count = q - content_text.replace(/[^\w ]/g, "").split(/\s+/).length;
        $('.word_count').html(word_count + " words remaining...");

        $('.message1').keyup(function() {
          wordCount(q);
        });

        try
        {
            if (new Number( word_count ) < 0) {
                $(".word_count").attr("id","bad");
            }
            else {
                $(".word_count").attr("id","good");
            }
        } catch (error)
        {
            //
        }

  };

HTML:

<input type="checkbox" name="entry.3.group" value="1/6" class="size1" id="group_3_1">
<input type="checkbox" name="entry.3.group" value="1/4" class="size1" id="group_3_2">


<div id="entry.8.single" class="message1" style="height: 400px; overflow-y:scroll; overflow-x:hidden;" contenteditable="true"> </div>
<span class="word_count" id="good"></span>

ありがとうございます！

4

3 に答える 3

1

一度に制限またはのみできるためradio、の代わりに使用する必要があると思います。checkboxes200600

このようにしてみてください、

wordCount();
$('input[name="entry.3.group"]').click(function () {
    wordCount();
    $('.word_count').html($(this).data('val') + " words remaining...");
});
$('.message1').keyup(function () {
    wordCount();    
});

function wordCount() {
    var q = $('input[name="entry.3.group"]:checked').data('val');
    var content_text = $('.message1').text(),
        char_count = content_text.length;
    if (char_count != 0) var word_count = q - content_text.replace(/[^\w ]/g, "").split(/\s+/).length;
    $('.word_count').html(word_count + " words remaining...");
    try {
        if (Number(word_count) < 0) {
            $(".word_count").attr("id", "bad");
        } else {
            $(".word_count").attr("id", "good");
        }
    } catch (error) {
        //
    }    
};

また、必要に応じspanて追加することもできますbad idkey upreturn false;

デモを見る

于 2013-11-14T06:56:58.510 に答える
1

私はおそらくこのようなことをするでしょう

http://jsfiddle.net/6WW7Z/2/

var wordsLimit = 50;

$('#group_3_1').click(function () {
    wordsLimit = 200;
    wordCount();
});
$('#group_3_2').click(function () {
    wordsLimit = 600;
    wordCount();
});
$('.message1').keydown(function () {
    wordCount();
});

function wordCount() {
    var text = $('.message1').text(),
        textLength = text.length,
        wordsCount = 0,
        wordsRemaining = wordsLimit;

    if(textLength > 0) {
        wordsCount = text.replace(/[^\w ]/g, '').split(/\s+/).length;
        wordsRemaining = wordsRemaining - wordsCount;
    }
    $('.word_count')
        .html(wordsRemaining + " words remaining...")
        .attr('id', (parseInt(wordsRemaining) < 0 ? 'bad' : 'good'));

};  

wordCount();

完璧ではありませんが、これを行う方法を示すかもしれません。チェックボックスの変更イベントを使用して、チェックされている/チェックされていない場合にwordsLimitを変更する必要があります。メッセージの残りの有効/無効な単語をスタイリングするには、ID ではなくクラスを使用します。

于 2013-11-14T06:44:09.673 に答える