jquery自動增長文本區域與初始文本

有一個非常簡單的jquery插件：autotextarea。我想教它一個小小的新技巧：調整的初始值以補償表單中提供的文本，而不是等待第一次擊鍵。除了onkeyup之外，有些靈魂可以告訴我要添加哪種處理程序？jquery自動增長文本區域與初始文本

這是plugin in question。

只是增加一個調用來增加（這個）到初始化函數不起作用 - 顯然，在它被調用的時候，佈局不完整，有效寬度很小，所以它們也獲得了太多高。這是我的修改版本：唯一的變化是撥打grow。

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

編輯：

在運行的document.ready這（）不起作用，因爲textarea的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; 
}

來源

2010-07-04 bmargulies

您能否向我們提供您正在使用的插件的鏈接？ – 2010-07-04 01:24:42

是的，我添加了鏈接。 – bmargulies 2010-07-04 01:31:20

您是否嘗試使用'$（window）.load（function（）{...}）'而不是document.ready？ – Mottie 2010-07-04 03:41:54

我不知道這個插件是如何工作的，但是這可能是一個化妝移液。

將textarea設置爲自動增長後，動態向textarea添加一個字符，以便它將觸發插件，然後刪除該字符。或者你可能需要模擬一個按鍵，任何一個。

讓我知道你是否需要一個代碼示例。

來源

2010-07-04 01:23:01

我很擔心，如果我在「準備好」時間執行其中的任何一個，那麼我會遇到問題，即有效寬度在這一點上很小。我似乎需要知道的是如何推遲* something *的執行，直到佈局完成並且寬度建立之後。 – bmargulies 2010-07-04 01:30:57

您是通過JavaScript將文本插入到textarea中的，還是它在實際的HTML中？ – 2010-07-04 01:32:44

實際的HTML。這是一個JSP頁面，文本就在那裏。 – bmargulies 2010-07-04 01:34:24

可以使此運行的佈局完成，像這樣的時候：

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

或者你可以用速記符號，它不同樣的事情：

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

只是裏面把它包這兩條線，它應該工作。

來源

2010-07-04 01:50:32

不，這就是我已經在做的，而且不起作用。顯然，文本區域的'cols'屬性非常懶惰。 – bmargulies 2010-07-04 01:57:35

我想我找到了你的問題......你需要定義textarea的行和cols：

<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默認行高度。

而且，你必須從CSS中刪除width: 100%因爲它會搞砸的功能

好了，因爲我有強迫症，我改寫了插件（demo）。

它現在應該基於其父級的寬度（textarea css寬度爲100％時效果最好）向textarea添加近似數量的cols。只是腳本從演示的左側複製並保存爲一個文件，把它叫做如下：

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

，並確保textarea的寬度也是100％......基本的CSS：

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

Hollar在我身上，如果你發現任何問題。

來源

2010-07-04 12:47:43 Mottie

對不起，但我不能那樣做。要求文本區域佔用可用寬度，而不是固定大小。 – bmargulies 2010-07-04 13:29:40

我已經更新了我的答案...我希望它能起作用！大聲笑。到目前爲止，我已經在Firefox，IE8和Chrome中測試過它。 – Mottie 2010-07-04 16:29:40

jquery自動增長文本區域與初始文本

回答

相關問題