Geek Answers Handbook

JQuery auto-grow text area compared to source text

There is a very simple jquery plugin: autotextarea. I would like to teach him one small new trick: first, resize to compensate for the text that is provided in the form, and not wait for the first keystroke. Can any soul tell me which handler to add to it in addition to onkeyup?

Below is the plugin .

Just adding a call to increase (this) to the initialization function does not work - apparently, at the time it was called, the layout is not completed, and the effective width is small, so they get too tall. Here is my changed version: the only change is the call grow.

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

EDIT

document.ready() , cols . , -, , , . , cols, $(txtArea).width(), div, . , div . - div?

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>

CSS:

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

, , .

, , , , . , .

, .

+1

, :

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

, :

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

, .

+1

, ... :

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

-1.

, width: 100% CSS,

, OCD, (demo).

Now it should add an approximate number of columns to the text field based on the width of its parent (it works best when the width of textarea css is 100%). Just copy the script on the left side of the demo file and save it as a file, name it like this:

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

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

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

I have Hollar if you find any problems.

+1
source

More articles:


All Articles