JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<textarea id='text' width='100%' class='form-control' rows='10'></textarea>
CSS
textarea{
resize: none;
}
JavaScript
!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 );
$('text').textareaWordCount({
limit : 100
});