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自动增长文本区域与初始文本

回答

相关问题