html5-contentEditable在线编辑

contentEditable属性，可用于在线编辑文本，从而简单的实现了用户编辑信息，该属性支持ie，且该属性有个隐藏的inherit（继承）状态，诺当前标签位指定true或者false则由其父级决定，是否为可编辑。

且可以通过

contenteditable="plaintext-only"

属性来控制只输入文本信息

然后该方法只对webkit的内核比较友好，如果是ie就gg了，当然还是能通过js去实现的。

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"/>
<title>可编辑列表</title>
<Meta name="keywords" content=""/>
<Meta name="description" content=""/>
<Meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
	<ul contentEditable="true">
		<li id="li">我是第1条</li>
		<li>我是第2条</li>
		<li>我是第3条</li>
		<li>我是第4条</li>
		<li>我是第5条</li>
	</ul>
	<script type="text/javascript">
		setInterval(function(){
			alert($("#li").text());	
		},3000);
	</script>
</body>
</html>

下方的js用来验证，获取到的信息是否为实时修改的内容。

html5-contentEditable在线编辑

相关文章