2.2.1新增-contentEditable属性

最新推荐文章于 2021-10-19 09:58:58 发布

ssmoom

最新推荐文章于 2021-10-19 09:58:58 发布

阅读量591

点赞数

分类专栏： HTML5_CSS3_JavaScript

HTML5_CSS3_JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
		<title>2.2.1新增-contentEditable属性</title>
	</head>
	<body>
		HTML5为大部分HTML元素都增加了contentEditable属性，
		如果将该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里内容。
		此处的HTML元素并不是指那些原本就允许用户输入的表单元素，如文本框、文本域之类的，
		而是可以把table、div等元素变成可编辑状态。<br>
		contentEditable属性具有“可继承”的特点：如果一个HTML元素的父元素是“可编辑”的，
		那么它默认也是可编辑的，除非显式指定contentEditable="false"。<br>
		eg：将div、table元素转换成可编辑状态。<br>
		<!-- 直接指定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" 
			οndblclick="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>
		<br><br>
		除此之外，HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性，
		当该元素处于可编辑状态时，该属性返回true，否则返回false。<br>
		当用户编辑完成后，用户编辑的内容就会直接显示在该页面中（不要刷新页面，
		一旦刷新页面就会重新加载，编辑的内容会丢失），开发者可以通过该元素的innerHTML属性来获取编辑后的内容。

	</body>
</html>

ssmoom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.2.1新增-contentEditable属性

2.2.1新增-contentEditable属性 HTML5为大部分HTML元素都增加了contentEditable属性，如果将该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里内容。此处的HTML元素并不是指那些原本就允许用户输入的表单元素，如文本框、文本域之类的，而是可以把table、div等元素变成可编辑状态。 contentEdita
复制链接

扫一扫