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; }
如果你发现任何问题,请告诉我。