html中dom的可编辑属性（contenteditable）用法

1、contenteditable使用

contenteditable作为dom元素的可编辑属性，默认为false，当需要一个非input的标签需要编辑时只需设置该dom的contenteditable值为true即可。

//eg:
	<style type="text/css">
		.box{
			width: 400px;
			height: 100px;
			padding: 10px;
			background: #00B0F0;
			color: #FF0000;
		}
	</style>
	<div class='box' contenteditable>
		请聚焦在此输入
	</div>

如下图：

2、placeholder使用

一个input输入框还有一个最基本的占位placeholder，如下操作即可满足：

	<style type="text/css">
		.box{
			width: 400px;
			height: 100px;
			padding: 10px;
			background: #00B0F0;
			color: #FF0000;
		}
		.box:empty:before{
			content:attr(placeholder);
			font-size: 20px;
			color: red;
			opacity: 0.7;
		}
	</style>
	<div class='box' contenteditable placeholder='请输入'></div>

3、拓展

同理打开任意一个网页，只要给它的dom加上contenteditable='true’就可以更改网页上的任意字符。