jquery auto-grow text area versus initial text

There's a very simple jquery plugin: autotextarea. I'd like to teach it one little new trick: to resize initially to compensate for text that is provided in the form, rather than waiting for the first keystroke. Can some kind soul please tell me what sort of handler to add to it 开发者_JS百科in addition to the onkeyup?

Here is the plugin in question.

Just adding a call to grow(this) to the initialization function doesn't work -- apparently, at the time it's called, the layout isn't complete, and the effective width is small, so they get much too tall. Here's my modified version: the only change is the call to grow.

//Public Method
jQuery.fn.autoGrow = function(){
    return this.each(function(){
        setDefaultValues(this);
        grow(this);
        bindEvents(this);
    });
};

EDIT:

Running this at document.ready() does not work, because the cols attribute of the textarea is not calculated yet. However, I came up with something, and perhaps you can help me clean it up. Instead of paying attention to cols, I use $(txtArea).width(), and then divide that by the width of a hidden div that contains a typical character. All is well, except for the need to put the hidden div on every page. Got any suggestions for manufacturing or obviating that div?

Typical text area HTML:

<textarea name="text[0]">歐洲 聯盟 研究 論壇 研討會 議程表 主題 : 歐盟 新憲 的 困境 與 挑戰 日期 : 九十四 年 九月 二日 ( 星期五 ) 09 : 00~ 13 : 30 地點 : 台北市 福華 大 飯店 四 樓 CR 403 ( 台北市 仁愛路 三 段 160 號 ) 主辦 單位 : 歐洲 聯盟 研究 論壇 ( European Union Research Forum , EURF ) 國立 政治 大學 國際 關係 研究 中心 起迄 時間 流程09 : 00 -09 : 10 報 到 09 :10 -09 : 20 開場 林碧炤 ( 政治 大學 副校 長 ) 9 : 20 - 10 : 20 第一 場 : 歐盟 公投 後 的 衝突 主持人 尤清 ( 立法委員 ) 引言人 1. </textarea>

And relevant CSS:

textarea {
    width: 100%;
    font-family: Arial, simsun;
    font-size: 16px;
}

---

I'm not sure exactly how the plugin works, but this could be a make-shift solution.

After you set the textarea to auto-grow, dynamically add a character to the textarea so it will trigger the plugin, and then remove the character. Or you may need to simulate a keypress, either one.

Let me know if you need a code example.

---

You can make this run when the layout is complete like so:

$(document).ready(function() {
   // Code to run once document is ready
});

Or you can use the shorthand notation, which does the same exact thing:

$(function(){
   // Code to run once document is ready
});

Just wrap it inside those two lines and it should work.

---

I think I found your problem... you need to define the rows and cols in the textarea:

<textarea rows="5" cols="40" name="text[0]">歐洲 聯盟 研究 論壇 研討會 議程表 主題 : 歐盟 新憲 的 困境 與 挑戰 日期 : 九十四 年 九月 二日 ( 星期五 ) 09 : 00~ 13 : 30 地點 : 台北市 福華 大 飯店 四 樓 CR 403 ( 台北市 仁愛路 三 段 160 號 ) 主辦 單位 : 歐洲 聯盟 研究 論壇 ( European Union Research Forum , EURF ) 國立 政治 大學 國際 關係 研究 中心 起迄 時間 流程09 : 00 -09 : 10 報 到 09 :10 -09 : 20 開場 林碧炤 ( 政治 大學 副校 長 ) 9 : 20 - 10 : 20 第一 場 : 歐盟 公投 後 的 衝突 主持人 尤清 ( 立法委員 ) 引言人 1. </textarea>

Without those settings, I was getting default column width and default row height of -1.

Also, you'll have to remove the width: 100% from the CSS as it will mess up the functionality

---

Well, because I have OCD, I rewrote the plugin (demo).

It should now add an approximate number of cols to the textarea based on the width of its parent (it works best when the textarea css width is 100%). Just copy the script from the left side of the demo and save it as a file, call it as follows:

$(document).ready(function(){
  $("textarea").autoGrow(true);
});

and make sure the textarea width is also 100%... basic CSS:

textarea {
 width: 100%;
 height: auto;
 overflow: hidden;
 font-family: Arial, simsun;
 font-size: 16px;
}

Hollar at me if you find any problems.