如何让textarea的高度自适应

另外找一个元素，和textarea设置一样的样式，当textarea输入的时候，将内容填充到该元素内，然后再将该元素的高度赋值给textarea。

这个元素比较苛刻了，不仅要接收textarea的文字内容，也要接收格式，比如回车什么的，很明显是pre标签了。

写在pre标签里的东西可以原格式输出，如果要在别的元素，比如div上实现类似的效果，可能需要使用一些CSS，比如white-space:pre，诸如此类的代码。

直接上代码了:

首先准备一个pre，一个textarea：

<pre class="input" id="pre"></pre>

<textarea class="input" id="textarea"></textarea>

然后给他们设置相同的样式：

input {

padding: 10px;

width: 300px;

min-height: 150px;

border: 1px solid #ccc;

resize: none;

font-size: 20px;

line-height:30px;

overflow: hidden;

word-wrap: break-word;

}

这里设置了min-height，给他们一个最小高度，里面的字体行高的都设置的一样，这样他们的表现就一致了。注意：为了纯英文的换行，加上word-wrap。

最后一段简单的脚本：

var textarea = documentgetElementById('textarea');

var pre = documentgetElementById('pre');

textareaoninput = function() {

pretextContent = textareavalue;

textareastyleheight = preoffsetHeight + 'px';

}

监听textarea的input事件，更新自身的高度。

这时候，高度自适应的textarea已经构造完成了。但是pre这个元素我们是不想让他显示的，需要把他隐藏掉，但不能简单的display：none，这样就取不到pre的高度了，所以使用另外一个属性visibility，不过这个属性还是会占用空间的，把pre绝对定位即可：

hide {

position: absolute;

z-index: -100;

visibility: hidden;

}

<pre class="input hide" id="pre"></pre>

大功告成！

不过还有一些兼容性工作要做，IE8以下是不支持oninput事件的，但他们支持一个更强大的属性：onpropertychange。

可能有的童鞋会觉得可以使用onkeyup或者onkeydown事件，我在chrome下试验了下，在textarea改变高度的时候，会有闪动，oninput的表现就比较平滑。推荐使用oninput。

CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。

而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea的默认显示，textarea右下角有一个可以控制缩放的按钮。

一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。

以下是resize属性的的各个取值:

none：用户不能 *** 纵机制调节元素的尺寸；

both：用户可以调节元素的宽度和高度；

horizontal：用户可以调节元素的宽度；

vertical：让用户可以调节元素的高度；

inherit：默认继承。

<textarea name="content" id="a">>

可以通过js去写，求采纳

$fnautoTextarea = function (options){  

    var defaults = {  

        maxHeight:null,  

        minHeight:$(this)height(),

    };  

    var opts = $extend({}, defaults, options);  

    return $(this)each(function (){  

        var _this = $(this);  

        _thisbind('paste cur keydown keyup focus blur', function (){  

            var height, style = thisstyle;  

            styleheight = optsminHeight + 'px';  

            if(thisscrollHeight > optsminHeight){  

                if(optsmaxHeight && thisscrollHeight > optsmaxHeight){  

                    height = optsmaxHeight;  

                    styleoverflowY = 'scroll';  

                }else{  

                    height = thisscrollHeight;  

                    styleoverflowY = 'hidden';  

                }  

                styleheight = height + 'px';  

            }  

        });  

    });  

}  

$(function(){

$('textarea')autoTextarea({maxHeight:400});

});

<textarea id="chat_textarea" class="input input_white chat_textarea">

</textarea>

<button id="send_chat_btn" class="btn btn_small btn_blue" cmd="sendMsg">

<span class="btn_text">发送</span>

</button>

我就说一下思路哈，获取当前textarea的上一级标签的宽高。然后设置宽高，如果你是想根据文字的长度来调整，就看你要定义每行多少个字了，然后根据文字长度定义宽度，根据文字行数定义高度

以上就是关于如何让textarea的高度自适应全部的内容，包括:如何让textarea的高度自适应、怎么设置textarea的大小、怎要用JS获取textarea的长度和值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！