Обнаружение действия пасты в textarea и подсчет количества слов

Question

, так что я работал над плагином последние пару дней. Плагин прост, получите количество слов внутри текстового поля. Вот и все. Теперь вот проблемы у меня были:

• не может должным образом получить количество слов после того, как данные вставляются
• обнаружил, когда текст будет вставлен есть время, так что обходной путь с этим было очень трудно найти.

Я пробовал практически все, поэтому я сделал перерыв, вернулся к нему, и снова я сдаюсь, ха-ха! Я отправлю код ниже и ссылку на скрипку, а также, с которой я работал.

!function($){ 
    var TextareaWordCount = function(element, options){ 
     this.$element = element; 
     this.options = options; 
     this.defaults = { 
      limit : 100 
     }; 
    } 
    TextareaWordCount.prototype = { 
     constructor : TextareaWordCount, 
     init : function(){ 
      var that = this, 
      obj = this.$element, 
      wordcount; 
      this.options = $.extend(this.defaults, this.options); 
      this.detectPaste(); 
     }, 
     getWordCount : function(words){ 
      var words_array = words.split(/\S+/g); 
      console.log(words_array); 
      return words_array.length; 
     }, 
     trimParagraph : function(){ 
      var element = this.$element; 
      var options = this.options; //get the global options 
      var words = $(element).text().split(/\S+/); 
      words = words.splice(0, options.limit); 
      var content = words.join(" "); 
      $(element).val(content); 
     }, 
     detectPaste : function(){ 
      var that = this; 
      var element = this.$element; 

      $(element).bind({ 
       paste : function(){ 
        var words; 
        function first(){ 
         return new Promise(function(resolve, reject) { 
         setTimeout(function(){ 
          words = element.val(); 
          resolve("pasted"); 

         }, 100); 
        }); 
        } 
        first().then(function(){ 
         console.log(words); 
         var count = that.getWordCount(words); 
         if(count > that.options.limit){ 
         // that.trimParagraph(element); 
         } 
        }); 
       } 
      }); 
     }, 
     'onKeyPress' : function(){ 

     } 
    }; 
    $.fn.textareaWordCount = function(){ 
     var _data = null; 
     if(arguments.length){ 
      _data = arguments[0]; 
     } 
     var _TextareaWordCount = new TextareaWordCount(this, _data); 
     _TextareaWordCount.init(); 
     return this; 
    }; 
    $.fn.textareaWordCount.Constructor = TextareaWordCount; 

}(window.jQuery); 

http://jsfiddle.net/ouhey3vd/118/

Answer 1

Я думаю, что вы собираетесь на самом деле очень неправильный путь. Вместо того, чтобы делать все эти сумасшедшие сложные вещи, почему бы вам не использовать собственные события элемента textarea?

Я знаю, что следующий код очень отличается от вашего, но для простоты это очень простой способ реализовать количество слов.

Link to Working JSFiddle

var textArea = $('#text'); 
var textAreaInfo = $('#textInfo'); 

function countWords(){ 
    textAreaInfo.html(textArea.val().split(/\S+/g).length-1); 
} 

textArea.keyup(function(){ 
    countWords(); 
}); 

Это не будет слушать события мыши, но это так легко добавить.

Примечание: использование таймаута для ожидания события вставки на самом деле действительно плохо идея. Это сильно недооценено, & Тайм-аут, о котором вы говорите, может значительно варьироваться в зависимости от характеристик компьютера. Иногда 100 мс будет недостаточно, особенно когда вставленный текст огромен.