文本框根据输入内容自适应高度

最新推荐文章于 2024-01-13 11:05:37 发布

weixin_30486037

最新推荐文章于 2024-01-13 11:05:37 发布

阅读量590

点赞数 1

原文链接：http://www.cnblogs.com/cxx328/p/6202334.html

版权

项目中需要用到textarea ，而且高度要随输入的内容自适应，网上查了很多资料，发现有两种解决的办法很好用，就摘录下来，方便以后的学习和运用

方法一：使用原声js

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文本框根据输入内容自适应高度</title>
    <style type="text/css">
        h2 {
            text-align: center;
            margin: 50px auto;
        }

        #textarea {
            display: block;
            margin: 0 auto;
            overflow: hidden;
            width: 550px;
            font-size: 14px;
            height: 18px;
            line-height: 24px;
            padding: 2px;
        }

        textarea {
            outline: 0 none;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
        }
    </style>
    <script>
        /*** 
         * 文本框根据输入内容自适应高度
         * @param                {HTMLElement}        输入框元素
         * @param                {Number}                设置光标与输入框保持的距离(默认0)
         * @param                {Number}                设置最大高度(可选)
         */
        var autoTextarea = function(elem, extra, maxHeight) {
            extra = extra || 0;
            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.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>
<h2>文本框根据输入内容自适应高度</h2>
<textarea id="textarea" placeholder="回复内容"></textarea>
<script>
    var text = document.getElementById("textarea");
    autoTextarea(text); // 调用
</script>
</body>

</html>

方法二：div模拟textarea文本域轻松实现高度自适应

demo演示地址：http://www.xuanfengge.com/demo/201308/textarea/demo1.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>div模拟textarea文本域轻松实现高度自适应</title>
    <style>
        h2 {
            text-align: center;
            margin: 50px auto;
        }

        .test_box {
            width: 400px;
            min-height: 20px;
            /*设置最小高度*/
            max-height: 1000px;
            /*设置最大高度超过300px时出现滚动条*/
            _height: 120px;
            margin-left: auto;
            margin-right: auto;
            padding: 13px;
            outline: 0;
            border: 1px solid #a0b3d6;
            font-size: 16px;
            line-height: 24px;
            word-wrap: break-word;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
        }
    </style>

</head>

<body>
<h2>div模拟textarea文本域轻松实现高度自适应</h2>
<div class="test_box" contenteditable="true">
    <br />
</div>
</body>

</html>

转载于:https://www.cnblogs.com/cxx328/p/6202334.html

weixin_30486037

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文本框根据输入内容自适应高度

项目中需要用到textarea ，而且高度要随输入的内容自适应，网上查了很多资料，发现有两种解决的办法很好用，就摘录下来，方便以后的学习和运用方法一：使用原声jsdemo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html<!DOCTYPE html><html><he...
复制链接

扫一扫