We can see that many websites can control the Textarea input box to increase according to the user input content. Below I will summarize the two text boxes based on the input content adaptive height examples.
Use jquery's autoTextarea Method
JS Code, default parameters and calls:
The Code is as follows: |
Copy code |
// Default parameters $ (". ChackTextarea-area"). autoTextarea ({ MaxHeight: 220, MinHeight: $ (this). height () }) |
Example
The Code is as follows: |
Copy code |
(Function ($ ){ $. Fn. autoTextarea = function (options ){ Var defaults = { MaxHeight: null, // whether the text box is automatically supported. Default Value: null. If the text box is not automatically supported, a value must be entered. This value is used as the maximum height of the text box automatically supported. MinHeight: $ (this). height () // The default minimum height, that is, the initial height of the text box. When the content height is smaller than this height, the text is displayed at this height. }; Var opts = $. extend ({}, defaults, options ); Return $ (this). each (function (){ $ (This). bind ("paste cut keydown keyup focus blur", function (){ Var height, style = this. style; This. style. height = opts. minHeight + 'px '; If (this. scrollHeight & gt; opts. minHeight ){ If (opts. maxHeight & amp; this. scrollHeight & gt; opts. maxHeight ){ Height = opts. maxHeight; Style. overflowY = 'scroll '; } Else { Height = this. scrollHeight; Style. overflowY = 'ddn '; } Style. height = height + 'px '; } }); }); }; }) (JQuery ); |
Js achieves adaptive height of text boxes based on input content
The Code is as follows: |
Copy code |
/** * The text box adaptive height based on the input content **/ Var autoTextarea = function (elem, extra, maxHeight ){ Extra = extra | 20; Var isFirefox = !! Document. getBoxObjectFor | 'initnerscreenx' in window, IsOpera = !! Window. opera &&!! Window. opera. toString (). indexOf ('Opera '), AddEvent = function (type, callback ){ Elem. addEventListener? Elem. addEventListener (type, callback, false ): Elem. attachEvent ('on' + type, callback ); }, GetStyle = elem. currentStyle? Function (name ){ Var val = elem. currentStyle [name]; If (name = 'height' & val. search (/px/I )! = 1 ){ Var rect = elem. getBoundingClientRect (); Return rect. bottom-rect. top- ParseFloat (getStyle ('addingtop '))- ParseFloat (getStyle ('paddingbottom ') + 'px '; };
Return val; }: Function (name ){ Return getComputedStyle (elem, null) [name]; }, MinHeight = parseFloat (getStyle ('height ')); Elem. style. maxHeight = elem. style. resize = 'none '; Var change = function (){ Var scrollTop, height, Padding = 0, Style = elem. style; If (elem. _ length = elem. value. length) return; Elem. _ length = elem. value. length;
If (! IsFirefox &&! IsOpera ){ Padding = parseInt (getStyle ('paddingtop ') + parseInt (getStyle ('paddingbottom ')); }; ScrollTop = document. body. scrollTop | document.doc umentElement. scrollTop; Elem. style. height = minHeight + 'px '; If (elem. scrollHeight> minHeight ){ If (maxHeight & elem. scrollHeight> maxHeight ){ Height = maxHeight-padding; Style. overflowY = 'auto '; } Else { Height = elem. scrollHeight-padding; Style. overflowY = 'ddn '; };
Style. height = height + extra + 'px '; ScrollTop + = parseInt (style. height)-elem. currHeight; Document. body. scrollTop = scrollTop; Document.doc umentElement. scrollTop = scrollTop; Elem. currHeight = parseInt (style. height ); }; }; AddEvent ('propertychange', change ); AddEvent ('input', change ); AddEvent ('focal ', change ); Change (); }; |
The call method is as follows (textarea_id is the id value of textarea ):
The Code is as follows: |
Copy code |
AutoTextarea (document. getElementById ('textarea _ id ')); |