臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > HTML > html 的textarea自适应内容

html 的textarea自适应内容

所属分类: HTML   2020-05-15 10:49:31  编辑:admin  浏览次数 502 次

<!DOCTYPE html>

<html>

<head>

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <title>文本框根据输入内容自适应高度</title>

    <style type="text/css">

        h2 {

            text-align: center;

            margin: 50px auto;

        }


        #textarea {

            display: block;

            margin: 0 auto;

            overflow: hidden;

            width: 60%;

            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>



</head>


<body>

<h2>文本框根据输入内容多少自适应高度</h2>

<textarea id="textarea" placeholder="回复内容"></textarea>

<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>

<script>

    var text = document.getElementById("textarea");

    autoTextarea(text); // 调用

</script>

<script async src="http://c.cnzz.com/core.php"></script>

</body>


</html>  


Web文章检索

Web文章目录