Question

有一个非常简单的jquery插件：autotextarea。我想教它一个小技巧：最初调整以补偿表单中提供的文本，而不是等待第一次击键。除了onkeyup之外，还有什么样的灵魂可以告诉我要添加什么样的处理程序？

只是添加一个调用grow（this）到初始化函数是行不通的 - 显然，在调用时，布局不完整，有效宽度很小，所以它们太高了。这是我的修改版本：唯一的变化是对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;
}

Answer 1

我不确定插件是如何工作的，但这可能是一个改变生活的解决方案。

将textarea设置为自动增长后，动态地将字符添加到textarea，以便触发插件，然后删除该字符。或者你可能需要模拟一个按键。

如果您需要代码示例，请告诉我。

Answer 2

您可以在布局完成时进行此操作：

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

或者您可以使用速记符号，它完全相同：

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

将它包装在这两行中，它应该可以工作。

Answer 3

我想我找到了你的问题......你需要在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>

没有这些设置，我的默认列宽和默认行高为-1。

此外，您必须从CSS中删除width: 100%，因为它会破坏功能

好吧，因为我有强迫症，我重写了插件（demo）。

现在应该根据其父级的宽度向textarea添加近似数量的cols（当textarea css宽度为100％时，它最有效）。只需从演示的左侧复制脚本并将其保存为文件，按如下方式调用：

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

并确保textarea宽度也是100％...基本CSS：

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

如果你发现任何问题，请告诉我。

jquery自动生成文本区域与初始文本

3 个答案: