Skip to main content
 首页 » 编程设计

jquery自动增长文本区域与初始文本

2026年03月30日1246JustinYoung

有一个非常简单的jquery插件:autotextarea。我想教它一个小新技巧:最初调整大小以补偿表单中提供的文本,而不是等待第一次击键。请问有好心人可以告诉我除了 onkeyup 之外还要添加什么样的处理程序吗?

这是plugin in question .

仅仅在初始化函数中添加对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; 
} 

请您参考如下方法:

我不确定该插件到底是如何工作的,但这可能是一个临时解决方案。

将文本区域设置为自动增长后,动态向文本区域添加一个字符,以便触发插件,然后删除该字符。或者您可能需要模拟按键,无论是其中之一。

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