Javascript jQuery中的弹性textarea插件

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

我的插件页面-

请帮我解决这个问题

---

附言-我不想使用任何其他插件，也不想像所有其他弹性插件那样在文本区底部插入额外一行的代码

我确实设法调整了你的插件，使其在Chrome中工作（未在其他浏览器上测试）。基本上，我必须以一种特殊的方式处理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();

---

你不认为按键和向下键要好得多。

我看不出有什么问题。你在使用哪个浏览器？我在使用google chrome v 15.0.874.106ok它在firefox中工作正常，但为什么在google chrome中不工作？我现在还没有chrome，所以无法测试它，但我希望它与渲染引擎有关（添加行时重新绘制元素）。也许更改css而不是textarea的行数会有所帮助？但是你必须计算出你想要的高度……thnx的帮助：）我来试试

/*
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();