There’s a very simple jquery plugin: autotextarea. I’d like to teach it one little new trick: to resize initially to compensate for text that is provided in the form, rather than waiting for the first keystroke. Can some kind soul please tell me what sort of handler to add to it in addition to the onkeyup?
Here is the plugin in question.
Just adding a call to grow(this) to the initialization function doesn’t work — apparently, at the time it’s called, the layout isn’t complete, and the effective width is small, so they get much too tall. Here’s my modified version: the only change is the call to grow.
//Public Method
jQuery.fn.autoGrow = function(){
return this.each(function(){
setDefaultValues(this);
grow(this);
bindEvents(this);
});
};
EDIT:
Running this at document.ready() does not work, because the cols attribute of the textarea is not calculated yet. However, I came up with something, and perhaps you can help me clean it up. Instead of paying attention to cols, I use $(txtArea).width(), and then divide that by the width of a hidden div that contains a typical character. All is well, except for the need to put the hidden div on every page. Got any suggestions for manufacturing or obviating that div?
Typical text area HTML:
<textarea name="text[0]">?? ?? ?? ?? ??? ??? ?? : ?? ?? ? ?? ? ?? ?? : ??? ? ?? ?? ( ??? ) 09 : 00~ 13 : 30 ?? : ??? ?? ? ?? ? ? CR 403 ( ??? ??? ? ? 160 ? ) ?? ?? : ?? ?? ?? ?? ( European Union Research Forum , EURF ) ?? ?? ?? ?? ?? ?? ?? ?? ?? ??09 : 00 -09 : 10 ? ? 09 :10 -09 : 20 ?? ??? ( ?? ?? ?? ? ) 9 : 20 - 10 : 20 ?? ? : ?? ?? ? ? ?? ??? ?? ( ???? ) ??? 1. </textarea>
And relevant CSS:
textarea {
width: 100%;
font-family: Arial, simsun;
font-size: 16px;
}
Similar:
- Need help making an auto grow web page hi can anyone advice me on how to make my webpage grow or expand by it self depending on how much information has to be...
- jquery get textbox text value <script type="text/javascript"> $(document).ready(function() { $('.btnSubmit').click(function(e) { alert($("#txtName").val()); }); }); </script> hi I have a text box like this <asp:TextBox ID="txtName" CssClass="txtName" runat="server" TabIndex="1" MaxLength="40"></asp:TextBox> <asp:HiddenField ID="hfName"...
- add new table won’t work. please help.. Hi, I appreciated if some one there can help me out, i want to add new table ‘config’ but seem not work fine. PHP Code:...
- JQuery draggable within an overflow: auto div is confined within the div. I have a draggable UL with a set height/width. This draggable list can be dragged to a sortable list. My code: $(“.serviceMembersAvailable li”).draggable({ helper: ‘clone’,...
- Grow / Zoom VB.NET Form Is there an easy way to grow / zoom a VB.NET application and all controls within it to fill a larger screen resolution (or must...
Tags: attribute, cols, div, fn, initialization function, keystroke, kind soul, modified version, onkeyup, paying attention, textarea, typical character, typical text