Ограничить количество слов в текстовом поле в JQuery

Я модифицирую некоторый код jquery, чтобы ограничить количество слов в текстовом поле, но я не могу понять, как получить значение. Вот код:

    <script>

var $limitWords = 20;
var $wordCount = $('#count').val();

    $(document).ready(function(){
      $("#edit-field-message-0-value").keyup(function() {
         $('#count').html($('#edit-field-message-0-value').val().split(/\b[\s,\.-:;]*/).length);

      if ($wordCount > $limitWords) {
      $('#edit-field-message-0-value').addClass('error');
      } else {
      $('#edit-field-message-0-value').addClass('not-error');
      }
      });
    });

</script>

В частности, чему должно быть равно "$wordCount", чтобы вернуть текущее значение?

Я думаю, что это должно быть легко, но я не могу понять это.

Любые идеи?

Спасибо, Скотт


jquery word-count
person skhot    schedule 16.10.2009    source источник
comment
Заимствуйте код из комментариев SO;)   -  person Seb    schedule 16.10.2009

Ответы (5)


arrow_upward
3
arrow_downward

Я не совсем понимаю переменную $wordCount. Я полагаю, что вы можете попытаться сделать следующее:

$("#edit-field-message-0-value").keyup(function() {
    var $this = $(this);
    var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;

    if (wordcount > $limitWords) {
        $this.addClass('error');
    } else {
        $this.addClass('not-error');
    } 
});

Я также предполагаю, что вы хотели сохранить текущий счет:

$("#edit-field-message-0-value").keyup(function() {
    var $this = $(this);
    var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > $limitWords) {
        $('#count').html($limitWords);
        $this.addClass('error');
    } else {
        $('#count').html(wordcount);
        $this.addClass('not-error');
    } 
});
person Corey Ballou    schedule 16.10.2009
comment
Я не могу отметить как ваш ответ, так и ответ Russ Cam, но спасибо, что указали мне на это. По сути, мне нужно было создать обработчик событий для определения переменной wordcount. - person skhot; 16.10.2009
comment
Здесь пространство принимается за слово и, следовательно, изменяет представление о подсчете слов. - person None; 15.09.2012

arrow_upward
2
arrow_downward

Это просто расширение вышеизложенного, отличный ответ от Притама, я обнаружил, что он ведет себя довольно странно и изменился

var wordcount = $this.val().split(/\b[\s,.-:;]*/).length - 1;

To:

var wordcount = jQuery.trim($this.val()).split(/\b[\s,.-:;]*/).length;

Это сортирует причудливое поведение подсчета слов (если вы отображаете значение обратно пользователю для обратной связи)

person Garry    schedule 26.10.2012

arrow_upward
2
arrow_downward

Следующий скрипт не позволит вам ввести более limitWord:

var limitWord = 20;
var maxchars = 0;
$("#edit-field-message-0-value").keyup(function() {
   $this = $(this);
   var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length - 1;
   if (wordcount < limitWord) {
      chars = $this.val().length;
    }
   else{
    var text = $(this).val();
    var new_text = text.substr(0,chars);
    $(this).val(new_text);
   }
});
person Pritam Prasun    schedule 31.08.2012

arrow_upward
1
arrow_downward

Если я вас правильно понял, вам нужно поместить код, чтобы получить значение внутри обработчика событий для поля ввода/текста, например, в обработчике событий для события нажатия клавиши. Таким образом, вы можете ограничить количество слов, пока пользователь вводит текст в область ввода/текста.

person Russ Cam    schedule 16.10.2009
comment
Я не могу пометить как ваш ответ, так и ответ cballou правильным, но спасибо, что указали мне на это. По сути, мне нужно было создать обработчик событий для определения переменной wordcount — в ответе cballou есть пример. Делает совершенным с тех пор. Спасибо, Рус Кэм! - person skhot; 16.10.2009

arrow_upward
0
arrow_downward

Поскольку мы не знаем, что такое элемент "#count", я взял очередь из метода, который устанавливает значение с помощью html(...). Итак, это должно работать:

var $wordCount = $('#count').html();
person John Fisher    schedule 16.10.2009