我从脚本创建textarea扩展器，但之后，它不会扩展 [英] I created textarea expander from script but after, it doesn't expands
问题描述
我不知道标题是否正确。
我用一个脚本创建了一个带有5个textarea的表，其中class =expand。
这个textarea当我写的扩展但后来不起作用。
写完jquery插件后是否有方法？
在我尝试不创建textarea之前，我在html文件中写道并且它有效。
I don't know if the title is correct. I created, with one script, a table with 5 textarea with class="expand". This textarea when I write expands but then doesn't works. Is there a method after writing to call the jquery plugin? Before i tried without creating the textarea, I wrote in the html file and it worked.
（2 textarea上的信息和示例：
(Info and example on 2 textarea:
http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html
http://jsfiddle.net/V2RLs/2/ (without class="expand")
）
但是当我在textarea中写字时它没有展开。为什么？
) But after When i write in the textarea it doesn't expands.Why?
这是我的脚本：
<script src='js/jquery.textarea-expander.js'></script>
<script >$(document).ready(function() {
var regex,v,l,c,b;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Add": function() {
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+txt_idparam.value+"</li>";
$('#formp').submit();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
$( "#btn_Addpar" ).click(function() {
i=(parseInt(contapara)+1);
$('#wnd_Addparam').append('<form method="GET" id="formparam"><table><tr><td><label> ID </label></td><td><textarea class="expand" id="inputp'+i+'_id" class="text"> </textarea></td></tr><tr><td><label>Type</label></td><td><select id="inputp'+i+'_type"><option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option><option value="list_values">List of values</option><option value="range">Range</option><option value="selection_collapsed">Selection (collapsed)</option><option value="selection_expanded">Selection (expanded)</option><option value="subimage">Subimage selection</option><option value="polygon">Polygon selection</option><option value="horizontal_separator">Horizontal separator</option></select></td></tr><tr><td> <label > Description</label></td> <td><textarea class="expand" id="inputp'+i+'_description" size=24></textarea></td></tr><tr><td><label>Value</label></td><td><textarea class="expand" id="inputp'+i+'_value"></textarea></td></tr><tr><td><label>Info (help)</label></td><td><textarea class="expand" id="inputp'+i+'_info"></textarea></td></tr><tr><td><label> Visible?</label></td><td><input type="checkbox" id="inputp'+i+'_visible"></td></tr></table>/form>');
$( "#wnd_Addparam" ).dialog( "open" );
});});</script>
插件扩展器..
/**
* TextAreaExpander plugin for jQuery
* v1.0
* Expands or contracts a textarea height depending on the
* quatity of content entered by the user in the box.
*
* By Craig Buckler, Optimalworks.net
*
* As featured on SitePoint.com:
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
* Please use as you wish at your own risk.
*/
/**
* Usage:
*
* From JavaScript, use:
* $(<node>).TextAreaExpander(<minHeight>, <maxHeight>);
* where:
* <node> is the DOM node selector, e.g. "textarea"
* <minHeight> is the minimum textarea height in pixels (optional)
* <maxHeight> is the maximum textarea height in pixels (optional)
*
* Alternatively, in you HTML:
* Assign a class of "expand" to any <textarea> tag.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea>
*
* Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea>
* The textarea will use an appropriate height between 50 and 200 pixels.
*/
(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length, ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax))+2;
e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
e.style.height = h + "px";
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != "textarea") return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).css("padding-top", 0).css("padding-bottom", 0);
$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
}
});
return this;
};
})(jQuery);
// initialize all expanding textareas
jQuery(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander();
});
推荐答案
该插件在document.ready上准备textareas，所以任何text.ready触发后该类被分配的textarea不受插件的影响 - 但是，你可以直接调用插件而不是添加类：
The plugin prepares textareas on document.ready, so any textarea that this class is assigned to after document.ready fired will not be affected by the plugin - however, you can just call the plugin directly instead of adding the class:
jQuery(".expand").TextAreaExpander();
但是，你不应该在一个元素上运行两次TextAreaExpander，所以一定要使用另一个类名来新生成的textareas，如果你有textareas使用在document.ready上初始化的插件 - 或者你可以删除插件的最后几行。
However, you should not run TextAreaExpander twice on one element, so be sure to use another classname for the newly generated textareas if you have textareas using the plugin that are initialized on document.ready - alternatively you can delete the last few lines of the plugin.
这篇关于我从脚本创建textarea扩展器，但之后，它不会扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
