自适应文本区域-优快云博客

本文介绍了一个JavaScript函数，用于实现文本区域的高度自适应调整。通过监听输入事件，动态改变文本区域的高度来适应内容长度，同时支持最大高度限制及滚动条显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>auto_input</title>  
        <meta name="generator" content="Studio 3 http://aptana.com/">  
        <meta name="author" content="yaoxingda.pt">  
        <!-- Date:  2014-06-26 17:58:14-->  
        <style type="text/css">  
            #container {  
                height:auto !important;  
                height:20px; /*假定最低高度*/  
                min-height:20px;   
            }  
        </style>  
        <script type="text/javascript">  
            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();  
        };  
        </script>  
    </head>  
    <body >  
        <div>自适应宽度</div>  
        <div>   
            <div id="container"><textarea  id="txtarea_id"></textarea> </div>  
            <div>aaaaaaaaaa</div>  
            <div>bbbbbbbbbbbbb</div>  
        </div>  
    </body>  
    <script>  
        autoTextarea(document.getElementById("txtarea_id"),1);  
    </script>  
</html>

textarea自动换行