使用div模拟textarea文本域实现高度自适应
textarea本身没有自适用的技能,文字过多就会出现滚动条的,所以我们要转变思维曲线救国。
使用很简单,一个普通的block元素上加个contenteditable=”true”就可以了
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.hh { min-height: 20px;width: 200px; _height: 200px;border: 1px solid pink }
</style>
</head>
<body>
<div contenteditable="true" class="hh"></div>
<a href="" id="kk">点击</a>
</body>
<script src="js/jquery-2.0.3.min.js"></script>
</html>
<script>
$(function(){
$('#kk').on('click',function(){
alert($('.hh').text())//获取div中的内容
})
})
</script>
可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是没有虚框显示的,需要添加下面的样式:outline:0;