将div等任何元素变为输入框的属性contenteditable
来源：原创
时间：2015-08-14
作者：脚本小站
分类：CSS/HTML
contenteditable属性可以将div等块级元素变为可以输入的输入框。textarea标签可以输入文字，但是不可以动态用js输入图片并显示出来。用contenteditable属性可以将输入的图片等内容及时呈现出来，尤其是在做留言板时会用到。
只要是块级元素都可以用此属性变为输入框
<div contenteditable="true"></div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.test_box {
width: 400px;
min-height: 120px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
}
</style>
<title></title>
</head>
<body>
<!-- contenteditable 为htm5特性，可将任何block 标签变为输入框 -->
<div contenteditable="true">
<img src="1.gif" />
</div>
</body>
</html>