检测粘贴动作到textarea并保持字数

时间:2015-09-03 15:13:49

标签: javascript jquery html

所以我在过去几天一直在制作一个插件。该插件很简单,在textarea中获取字数。而已。现在这是我一直遇到的问题:

    粘贴数据后
  • 无法正确获取字数
  • 在粘贴文本时发现有超时,因此很难找到解决方法。

我已经尝试了所有的东西,所以我休息了一下,回到它,我再一次放弃,哈哈!我将发布下面的代码以及我一直在使用的小提琴的链接。

!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/

1 个答案:

答案 0 :(得分:2)

我认为你正走在一条非常错误的道路上。 为什么不使用原生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毫秒不够,特别是当粘贴的文字很大时。