我从脚本创建了 textarea 扩展器，但之后它没有扩展

问题描述

我不知道标题是否正确.我用一个脚本创建了一个带有 5 个 textarea 且 class="expand" 的表.我写作时这个文本区域会扩展但随后不起作用.有没有写完后调用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 上准备 textarea，因此在 document.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 两次，因此如果您有使用在 document.ready 上初始化的插件的 textareas，请确保为新生成的 textareas 使用另一个类名 - 或者您可以删除最后几行插件.

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 扩展器，但之后它没有扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！