Подсчет и ограничение слов в текстовом поле

Мне удалось сделать эту маленькую функцию jquery для подсчета количества слов, введенных в поле textarea.

вот скрипка

и вот код:

Jquery:

$(document).ready(function()
{
var wordCounts = {};
$("#word_count").keyup(function() {
    var matches = this.value.match(/\b/g);
    wordCounts[this.id] = matches ? matches.length / 2 : 0;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('#display_count').html(finalCount);
    am_cal(finalCount);
}).keyup();
});

и вот html-код

<textarea name="txtScript" id="word_count" cols="1" rows="1"></textarea>
Total word Count : <span id="display_count">0</span> words.

как я могу вносить в него изменения, чтобы иметь такой вывод, как этот

Общее количество слов: 0 слов. Осталось слов: 200

и когда он достигает 200 слов, он не должен позволять вставлять или вводить больше слов в поле textarea, в jquery? то есть он должен ограничивать пользователя набрать ровно 200 слов не более.

Пожалуйста, помогите.

Большое спасибо заранее.

EDIT: модификация необходима только в этом коде, поскольку я очень хорошо осведомлен о плагинах, но они могут помешать основному коду.

ОТВЕТЫ

Ответ 1

Использование return false для остановки событий keyup не блокирует событие, потому что в этом случае событие уже запущено. Событие keyup срабатывает, когда пользователь отпускает ключ, после выполняется действие по умолчанию этого ключа по умолчанию.

Вам нужно будет программно изменить значение textarea, которое у вас есть как #wordcount:

$(document).ready(function() {
  $("#word_count").on('keyup', function() {
    var words = this.value.match(/\S+/g).length;

    if (words > 200) {
      // Split the string on first 200 words and rejoin on spaces
      var trimmed = $(this).val().split(/\s+/, 200).join(" ");
      // Add a space at the end to make sure more typing creates new words
      $(this).val(trimmed + " ");
    }
    else {
      $('#display_count').text(words);
      $('#word_left').text(200-words);
    }
  });
});

http://jsfiddle.net/7DT5z/9/

Ответ 2

Я бы сделал это так:

$("#word_count").on('keydown', function(e) {
    var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0;
    if (words <= 200) {
        $('#display_count').text(words);
        $('#word_left').text(200-words)
    }else{
        if (e.which !== 8) e.preventDefault();
    }
});

FIDDLE

Ответ 4

Добавление простой if condition решит вашу проблему.

$.each(wordCounts, function(k, v) {
    if(finalCount <= 200) {
        //Todos
    }
    else {
      return false;  //prevent keyup event
    }
 });

Ответ 5

$(документ).ready(функция() { $ ( "Текстовое поле" ). На ( 'KeyUp', функция() {

                var value = $('textarea').val();
                var wordCount = 0;

                if(value == ""){
                    $('textarea').empty();
                }
                else{

                    var regex = /\s+/gi;
                    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
                }

                    if(wordCount > 25){
                     var trimmed = $(this).val().split(/\s+/,25).join(" ");
                    $(this).val(trimmed + " ");
            }
            else{
                $('#display_count').html(25- wordCount +" words left");
            }


              });

});

Ответ 6

Вы можете использовать позитивные регулярные выражения для сохранения пробелов - чтобы обратные коды и вкладки не сворачивались в одно пространство. Что-то вроде этого:

  var wordLimit = 5;
  var words = 0;
  var jqContainer = $(".my-container");
  var jqElt = $(".my-textarea");

function charLimit()
{
  var words = 0;
  var wordmatch = jqElt.val().match(/[^\s]+\s+/g);
  words = wordmatch?wordmatch.length:0;

  if (words > wordLimit) {
      var trimmed = jqElt.val().split(/(?=[^\s]\s+)/, wordLimit).join("");
      var lastChar = jqElt.val()[trimmed.length];
      jqElt.val(trimmed + lastChar);
  }
  $('.word-count', jqContainer).text(words);
  $('.words-left', jqContainer).text(Math.max(wordLimit-words, 0));
 }
 
 jqElt.on("keyup", charLimit);
 charLimit();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
  <textarea class="my-textarea"></textarea>
  <span class="words-left"></span> words left
<div>