textarea随⽂字的增多⾃动增⾼或者⾃动减少
⾕歌、IE、Opera默认显⽰两⾏⽂本，⽕狐默认显⽰3⾏⽂本，⾏数超过两⾏是会出现滚动条，可以⾃⼰设定设定⼀些⾏数来进⾏强制多少⾏进⾏显⽰。
⽅法⼀：div模拟textarea⽂本域轻松实现⾼度⾃适应（缺点就是没有了placeholder提⽰语）
因为textarea不⽀持⾃适应⾼度，就是定好⾼度或者是⾏数之后，超出部分就会显⽰滚动条，看起来不美观。
⽽⽤DIV来模拟时，⾸先遇到的问题是：div怎么实现输⼊功能？
如⼀个普通的block元素上加个contenteditable="true"就实现编辑，出现光标了
contenteditable属性虽是HTML5⾥⾯的内容，但是IE似乎⽼早就⽀持此标签属性了。所以，兼容性⽅⾯还是不⽤太担⼼的。
第⼀种⽅法：
<style type="text/css">
#textarea {
width: 400px;
min-height: 20px;
max-height: 300px;
_height: 120px;  //IE6不⽀持min/max  所以做了hack
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);
}
</style>
<div class="textarea" contenteditable="true"><br /></div>
第⼆种：⽂本框textarea根据输⼊内容⾃适应⾼度
这个写法是⽤原⽣JS写的，考虑了很多兼容性问题，完全和新浪微博的回复效果⼀样的功能
<!DOCTYPE html><br ><html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
textarea中cols表示function init () {
var text = ElementById('text');
function resize () {
text.style.height = 'auto';
texttext.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change',  resize);
observe(text, 'cut',    delayedResize);
observe(text, 'paste',  delayedResize);
observe(text, 'drop',    delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="40" rows="1" id="text"></textarea>
</body>
</html>
利⽤上⾯的代码就可以实现初始化的时候textarea的⾼度⾃适应并且textarea在修改的时候也可以实现其⾼度⾃适应。第三种：Jquery控制⾼度的⽅法
<script type="text/javascript">
d({
autoHeight: function(){
return this.each(function(){
var $this = jQuery(this);
if( !$this.attr('_initAdjustHeight') ){
$this.attr('_initAdjustHeight', $this.outerHeight());
}
_adjustH(this).on('input', function(){
_adjustH(this);
});
});
/**
* 重置⾼度
* @param {Object} elem
*/
function _adjustH(elem){
var $obj = jQuery(elem);
return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})                                .height( elem.scrollHeight );
}
}
});
// 使⽤
$(function(){
$('textarea').autoHeight();
});
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。