Home >Web Front-end >JS Tutorial >Code for the text box to adapt its height according to the input content_Form special effects

Code for the text box to adapt its height according to the input content_Form special effects

WBOYOriginal: 2016-05-16 18:00:201044browse

In fact, most modern browsers support the text box size adjustment function, but in most cases they do not automatically adapt quickly. I found a relatively simple method on the Internet to achieve highly adaptive text boxes, so I encapsulated this function and prepared it for future applications. to the project.
Source code:
23:03 Article update:
Thanks to alucelx for his help again, which greatly simplified the method and updated the code to version 0.2. At the same time, it solved the problem of compatibility with Opera browser and is now fully compatible with IE6 and Modern browser!
Online demo: http://demo.jb51.net/js/2011/autoArea/index.htm
autoTextarea.js

Copy code The code is as follows:

 
/**
* The text box adapts its height according to the input content
* @author tang bin 
* @version 0.3 
* @see http://www.planeart.cn/?p=1489 
 * @param {HTMLElement} Input box element 
* @param {Number} Set the distance between the cursor and the input box (default 20) 
* @param {Number} Set the 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>

The text box adapts its height according to the input content