-1

JSFiddle: http://jsfiddle.net/qPvch/62/

1 ページに 2 つのテキスト ボックスがあります。最初の文字数制限を 5 にし、2 つ目の文字数制限を 6 にします。

HTML:

<textarea name="what" id="five" rows="1" placeholder="limit 5 words"></textarea>
<div class="word_count_5">
Word count: <span>0</span>
</div> 

<textarea name="what" id="six" rows="1" placeholder="limit 6 words"></textarea>
<div class="word_count_6">
Word count: <span>0</span>
</div>

JQuery:

var maxWords1 = 5;
jQuery('textarea#five').keypress(function() {
var $this, wordcount;
$this = $(this);
wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
if (wordcount > maxWords1) {
    jQuery(".word_count_5 span").text("" + maxWords1);
    return false;
  } else {
    return jQuery(".word_count_5 span").text(wordcount);
}
});

var maxWords2 = 6; //REPEATING MYSELF
jQuery('textarea#six').keypress(function() {
var $this, wordcount;
$this = $(this);
wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
if (wordcount > maxWords2) {
    jQuery(".word_count_6 span").text("" + maxWords2);
    return false;
  } else {
    return jQuery(".word_count_6 span").text(wordcount);
}
});
4

3 に答える 3

1

これが可能な解決策です。制限は一度だけ書き込まれます。

HTML :

<textarea name="what" id="five" rows="1" data-limit=5></textarea>
<div class="word_count">
Word count: <span>0</span>
</div> 

<textarea name="what" id="six" rows="1" data-limit=6></textarea>
<div class="word_count">
Word count: <span>0</span>
</div>

JavaScript :

$('textarea[data-limit]').each(function() {
  var $this=$(this), limit = $this.data('limit');
  $this.attr('placeholder', 'limit '+limit+' words');
  $this.keypress(function(){
     var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
     $this.next('.word_count').text(Math.min(wordcount, limit));
     return wordcount<=limit;
  });
});

デモンストレーション

于 2013-08-05T17:09:39.297 に答える
1

wordcount 処理を別の関数に移動し、最大 wordcount を渡します

function checkWordcount($this, maxwords) {
    wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > maxwords) {
        jQuery(".word_count_" + maxwords + " span").text("" + maxwords);
        return false;
      } else {
        return jQuery(".word_count_" + maxwords + " span").text(wordcount);
    }
}

var maxWords1 = 5;
jQuery('textarea#five').keypress(function() {
    var $this, wordcount;
    $this = $(this);
    return checkWordcount($this, maxWords1);
});
于 2013-08-05T17:14:42.533 に答える