textarea随输入文本增长，其高度自动加大

首先给出答案：

<textarea style="resize:none;overflow-y:hidden; min-height:80px;" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

解释：

若是只是一个textarea元素，当咱们写入内容超过其高度时，默认会出现滚动条。如图：

因此，咱们就是让其不出现滚动条，而后动态改变textarea的高度。

因此，咱们首先设置其样式：

textarea{
overflow-y:hidden;
}

设置完，再次输入，发现和咱们一般的hidden效果不同：咱们能够无限输入，超出部分经过键盘↑↓键仍然能够查看，并无隐藏，只是不出现滚动条了。

同理，你设置height和width，也只是textarea的初始可视化宽高，而不能限制它内容的增长。

注：textarea元素有本身设置宽高的方法，就是cols和rows属性。这俩属性和用CSS设置其宽高有必定关系，你们能够按照本身习惯使用，我就习惯使用height和width设置。

没有滚动条，就成功一半了。下面就是当内容超出可视区时，增长可视区的高度。这里问题来了，textarea可视区的高度是什么呢？

你们能够试一下：

<script>
$('textarea').height();
$('textarea').innerHeight();
$('textarea').outerHeight(true);
</script>

这几个值都是不变的。无论咱们是否设置了初始高度，其值都不会改变。那怎么获取咱们输入内容所占的高度呢，这个高度就是scrollHeight。

这个是JS元素对象的一个属性，在JQ中并无封装该属性。若是想要在JQ中使用该属性，只能将JQ对象转换成DOM对象才行：

$('textarea')[0].scrollHeight;

实际上，咱们用得较可能是scrollTop和scrollLeft属性，表示被卷过去的头部和左侧距离。这个属性也是scroll，这里用在获取textarea输入内容的高度再适合不过（内容超出可视区，不至关于卷起来了吗）。因此咱们能够这样动态改变textarea的高度：

$('textarea').height($('textarea')[0].scrollHeight)

这条语句的意思是：textarea的高度，便可视化高度的值，等于输入内容的高度。这样，textarea就会始终包围着文本。

剩下的就是添加事件了。咱们确定会想到keyup事件。当咱们每次输入一个数据时，触发keyup事件，而后改变textarea高度。可是，使用keyup事件有一个问题：必须有按键按下才能触发事件。这有什么问题吗？你们想一想，textarea里的值必定得敲写吗？若是我直接复制内容呢。咱们使用Ctrl + C/V复制黏贴时，因为也按下了按键，因此仍然能触发事件keyup，但若是是经过鼠标右键复制粘贴则不能触发keyup。这就是问题。

因此，有一个更好的事件替换keyup：input事件。该事件是一旦检测有输入，就触发事件，无论你是右键复制仍是按下键盘。

然而，input事件不支持IE 9如下（IE 9支持）。而IE也有一个本身的属性，propertychange，所以考虑兼容性：

<script>
$('textarea').on('input propertychange',function(){
    $(this).height(this.scrollHieght);
})
</script>

注意：IE 9 如下支持的JQ版本就不一样了，须要选择适合的JQ版本才能正确兼容。

补充事件属性知识：不少人可能以为，我怎么没见过JQ手册里油input和propertychange事件啊？手册里确实没有，缘由应该是由于有些不多用的事件就没写，只是将经常使用的事件写在手册上了，可是你们放心用，都是能用的。

实际上，HTML元素的属性分为普通属性和事件属性。好比form元素，它有name属性，还有事件属性onsubmit，表示提交时触发；全部HTML的事件属性（以on开头的属性）都有对应的JQ事件（只须要去掉on便可）

HTML事件属性   JQ事件

onclick              click

onsubmit          submit

onchange         change

onkeyup           keyup

等等，这里上一个连接，显示HTML的事件属性（包括但不全）

http://www.runoob.com/tags/ref-eventattributes.html

总结：

①textarea的宽高设置，是指初始可视化高度

②scrollHeight以及在JQ中调用该属性的使用

③input和propertychange事件替换keyup事件

④事件属性