jQuery中的弹性textarea插件

Question

我创建了一个jQuery弹性插件。我有一个问题，如果我在第一行写一个单词，如“jQuery”，然后按回车键，“jQuery”单词将被隐藏几毫秒，然后一个新行将被插入textarea

我的插件页面 - http://jsfiddle.net/yash_wow/7F8aK/3/

请帮我解决这个问题。

P.S。 - 我不想使用任何其他插件，我不希望代码在textarea的底部插入额外的行，就像所有其他弹性插件一样！

Answer 1

我确实设法调整了您的插件，以便在Chrome here中工作（在其他浏览器上未经测试）。基本上我必须以一种特殊的方式处理Enter以避免它将新行添加到文本框的底部并向下滚动以在之前自动查看它你有机会增长文本框。

我还必须添加.keyup()，以便退格也能正常工作。

以下是完整的javascript：

/*
Author - Yash Mathur
*/
jQuery.fn.autoGrow = function() {
    return this.each(function() {
        var colsDefault = this.cols;
        var rowsDefault = this.rows;

        var grow = function() {
            growByRef(this);
        }

        var growByRef = function(obj, enterPressed) {
            var linesCount = 0;
            var lines = obj.value.split('\n');

            for (var i = lines.length - 1; i >= 0; --i) {
                linesCount += Math.floor((lines[i].length / colsDefault) + 1);
            }

            if (enterPressed) linesCount++;

            if (linesCount > rowsDefault) obj.rows = linesCount;
            else obj.rows = rowsDefault;
        }

        var characterWidth = function(obj) {
            var characterWidth = 0;
            var temp1 = 0;
            var temp2 = 0;
            var tempCols = obj.cols;

            obj.cols = 1;
            temp1 = obj.offsetWidth;
            obj.cols = 2;
            temp2 = obj.offsetWidth;
            characterWidth = temp2 - temp1;
            obj.cols = tempCols;

            return characterWidth;
        }

        $(this).keypress(function(evt) {
            if (evt.which == 13) {
                growByRef(this, true);
                this.value += '\n';
                return false;
            } else {
                growByRef(this, false);
            }
        });
        $(this).keyup(function(evt) {
           if (evt.which == 13)
              return false;
           growByRef(this, false); 
        });
        this.style.overflow = "hidden";
        //this.onkeyup = grow;
        this.onfocus = grow;
        this.onblur = grow;
        growByRef(this);
    });
};
$("textarea").autoGrow();

Answer 2

/*
Author - Yash Mathur
*/
jQuery.fn.autoGrow = function(){
    return this.each(function(){
        var colsDefault = this.cols;
        var rowsDefault = this.rows;

        var grow = function() {
            growByRef(this);
        }

        var growByRef = function(obj) {
            var linesCount = 0;
            var lines = obj.value.split('\n');

            for (var i=lines.length-1; i>=0; --i)
            {
                linesCount += Math.floor((lines[i].length / colsDefault) + 1);
            }

            if (linesCount > rowsDefault)
                obj.rows = linesCount;
            else
                obj.rows = rowsDefault;
        }

        var characterWidth = function (obj){
            var characterWidth = 0;
            var temp1 = 0;
            var temp2 = 0;
            var tempCols = obj.cols;

            obj.cols = 1;
            temp1 = obj.offsetWidth;
            obj.cols = 2;
            temp2 = obj.offsetWidth;
            characterWidth = temp2 - temp1;
            obj.cols = tempCols;

            return characterWidth;
        }
        this.style.overflow = "hidden";
        this.onkeydown = grow;
        this.onfocus = grow;
        this.onblur = grow;
        this.keypress = grow;
        growByRef(this);
    });
};
$("textarea").autoGrow();

你认为 KeyPress 和 Keydown 要好得多。