In fact, most modern browsers support the text box size adjustment function, most of the cases did not automatically adapt to the quick, found a way on the network to achieve a relatively simple text box highly adaptive, so encapsulated this function, ready to apply to the project in the future.
Source code:
23:03 Article update:
thanks Alucelx classmate again to help, greatly simplifies the method, the update code for 0.2 version, while resolving the compatible opera browser, so fully compatible with the ie6+ and modern browsers!
Online Demo: http://demo.jb51.net/js/2011/autoArea/index.htm
Autotextarea.js
Copy Code code as follows:
/**
* text box adaptive height based on input
* @author Tang bin
* @version 0.3
* @see http://www.planeart.cn/?p=1489
* @param {htmlelement} input box element
* @param {number} sets the distance between the cursor and the input box (default 20)
* @param {number} set maximum height (optional)
*/
var autotextarea = function (Elem, Extra, maxheight) {
extra = Extra | | 20;
var Isfirefox =!! Document.getboxobjectfor | | ' Mozinnerscreenx ' 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 (' paddingtop '))-
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.documentElement.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 = ' hidden ';
};
style.height = height + extra + ' px ';
scrolltop + + parseint (style.height)-elem.currheight;
document.body.scrollTop = scrolltop;
document.documentElement.scrollTop = scrolltop;
elem.currheight = parseint (style.height);
};
};
addevent (' PropertyChange ', change);
addevent (' input ', change);
addevent (' Focus ', change);
change ();
};
Test Code:
<! DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<title> text box Adaptive height </title>
based on input content
<style type= "Text/css" >
#textarea {font:1.4em/1.8em Arial; overflow:hidden; width:550px; height:6em; padding:10px;}
</style>
<script src= "Autotextarea.js" ></script>
</head>
<body style= "background: #FBFCFD URL (http://goo.gl/kLsZX);" >
<textarea id= "textarea" ></textarea>
<script>
var text = document.getElementById ("textarea"),
tip = ' want to write something ... ';
Autotextarea (text);//Call
Text.value = tip;
Text.onfocus = function () {
if (text.value = = tip) Text.value = ';
};
Text.onblur = function () {
if (text.value = = = ") Text.value = tip;
};
</script>
</body>
</html>
