码迷,mamicode.com
首页 > Web开发 > 详细

HTML5新增的通用属性 - contentEditable属性

时间:2015-10-13 19:36:17      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

HTML5为大部分HTML元素增加了contentEditable属性,如果将该属性设置为true,则浏览器允许开发者直接编辑该HTML元素里的内容,并且支持“可继承“的特点,也就是如果一个HTML元素的父元素是可编辑的,那么它也是可编辑的。

示例代码:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>contentEditable属性</title>
	</head>
	<body>
		<!-- 直接指定contentEditable=“true”表明该元素是可编辑的 -->
		<div contenteditable="true" style="width: 500px; border:1px solid black">
			疯狂Java讲义
			<!-- 该元素的父元素有contentEditable=“true”,因此该表格也是可以编辑的 -->
			<table style="width: 420px; border-collapse: collapse;" border="1">
				<tr>
					<td>疯狂Java讲义</td>
					<td>疯狂Android讲义</td>
				</tr>
				<tr>
					<td>轻量级Java EE企业应用实战</td>
					<td>经典Java EE企业应用实战</td>
				</tr>
			</table>
		</div>
		<hr />
		<!-- 这个表格默认是不可编辑的,双击之后该表格变为 -->
		<table id="target" ondblclick="this.contentEditable=true" style="width: 420px; border-collapse: collapse;" border="1">
			<tr>
				<td>Java</td>
				<td>Ruby</td>
			</tr>
			<tr>
				<td>C/C++</td>
				<td>Python</td>
			</tr>
		</table>
	
	</body>
</html>




HTML5新增的通用属性 - contentEditable属性

标签:

原文地址:http://my.oschina.net/u/2399867/blog/516600

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!