問題描述
我不知道標題是否正確.我用一個腳本創建了一個帶有 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 擴展器，但之后它沒有擴展的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！