将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>