div模拟textarea文本域轻松实现高度自适应

最新推荐文章于 2020-05-31 21:08:00 发布

心郎

最新推荐文章于 2020-05-31 21:08:00 发布

阅读量225

点赞数

分类专栏：前段_css

前段_css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

demo演示地址：http://www.xuanfengge.com/demo/201308/textarea/demo1.html

因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。

而用DIV来模拟时，首先遇到的问题是：div怎么实现输入功能？

可能我们还是第一次见到这个属性contenteditable，如一个普通的block元素上加个contenteditable="true"就实现编辑，出现光标了。如

contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>div模拟textarea文本域轻松实现高度自适应</title>
    <script src="http://code.jquery.com/jquery-2.2.4.js"></script>
    <style>
	.textarea{
	    width: 400px;
	    min-height: 20px;
	    max-height: 300px;
	    _height: 120px;
	    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>
</head>
<body>
	<div class="textarea" contenteditable="true"><br /></div>
</body>
</html>