textarea高度自适应

最新推荐文章于 2023-05-23 17:39:24 发布

小马pony

最新推荐文章于 2023-05-23 17:39:24 发布

阅读量1.6w

点赞数 2

分类专栏： CSS

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。

而用DIV来模拟时，首先遇到的问题是：div怎么实现输入功能？

可能我们还是第一次见到这个属性contenteditable，如一个普通的block元素上加个contenteditable="true"就实现编辑，出现光标了。如

1	< div contenteditable = "true" > < / div >

contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。

CSS代码

. textarea {

width : 400px ;

min - height : 20px ;

max - height : 300px ;

_height : 120px ;

margin - left : auto ;

margin - right : auto ;

padding : 3px ;

outline : 0 ;

border : 1px solid #a0b3d6;

font - size : 12px ;

line - height : 24px ;

padding : 2px ;

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

}

HTML代码

1	< div class = "textarea" contenteditable = "true" > < br / > < / div >

CSS代码中，因为IE6不支持min/max，所以做了hack，其他的也好理解。

方法二：文本框textarea根据输入内容自适应高度

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

这个写法是用原生JS写的，考虑了很多兼容性问题，完全和新浪微博的回复效果一样的功能。有兴趣的童鞋可以仔细分析下代码。

CSS代码

#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 ) ;

}

javascript代码

/**
 * 文本框根据输入内容自适应高度
 * @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();
};

/**

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

* @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 ( ) ;

} ;

HTML代码（写在body里面的）

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

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

autoTextarea ( text ) ; // 调用

</script>

小马pony

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
textarea高度自适应

方法一：div模拟textarea文本域轻松实现高度自适应demo演示地址：http://www.xuanfengge.com/demo/201308/textarea/demo1.html因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。而用DIV来模拟时，首先遇到的问题是：div怎么实现输入功能？可能我们还是第一次见到这个属
复制链接

扫一扫

专栏目录