textarea文本框根据输入内容多少自适应高度-白红宇

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

阅读量：348 次

发布时间：2019-03-04

本文共 3800 字，大约阅读时间需要 12 分钟。

效果图

è¿éåå¾çæè¿°

原生JS写的

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

你可能感兴趣的文章

CSS border-style 属性

查看>>

Python数据类型列表、元组、集合、字典的区别和相互转换

Mac OS X 下 su 命令提示 sorry 的解决方法

查看>>

vue-router 缓存路由组件对象