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

有一个非常简单的jquery插件:autotextarea。 我想教一个小技巧: 最初resize以补偿表单中提供的文本,而不是等待第一次击键。 有些灵魂请告诉我除了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:

  

和相关的CSS:

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

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

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

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

你可以在布局完成时运行,如下所示:

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

或者您可以使用简写符号,它完全相同:

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

只需将它包装在这两行中就可以了。

我想我找到了你的问题……你需要在textarea中定义行和列:

  

没有这些设置,我得到默认列宽和默认行高-1。

此外,您将不得不从CSS中移除width: 100% ,因为它会破坏function


好吧,因为我有强迫症,我重写了插件( 演示 )。

它现在应该根据其父级的宽度向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; } 

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