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

2019独角兽企业重金招聘Python工程师标准>>>

首先给出答案：

<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事件

④事件属性

转载于:https://my.oschina.net/u/3618644/blog/1549761