HTML５——使用户可编辑页面的contentEditable属性与designMode属性

最新推荐文章于 2021-07-09 17:37:34 发布

潇雪凌宇

最新推荐文章于 2021-07-09 17:37:34 发布

阅读量734

点赞数 3

分类专栏： HTML5 文章标签： HTML５ contentEditable 可编辑

本文链接：https://blog.csdn.net/weixin_44407699/article/details/97878130

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML５之新增属性contentEditable、designMode，这两个属性。使用户可以直接编辑网页页面内的内容，非常有趣，大家一起来玩呀！！！

contentEditable

值：true／false（true代表可编辑，false相反）

我们来玩一下

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content/Type" content="twxt/html; charset=utf-8">
	<title></title>
</head>
<body>
	<div contentEditable="true" style="width: 500px;border: 1px solid black">
		slaaabsba
		<a href="#">超链接</a>
		<table style="width: 420px; border-collapse: collapse; " border="1">
			<tr>
				<td>aaaaaa</td>
				<td>bbbbbbb</td>
			</tr>
			<tr>
				<td>ccccccc</td>
				<td>ddddddd</td>
			</tr>
		</table>
	</div>
	<hr/>
	<table id="target" ondblclick="this.contentEditable=true;" style="width: 420px;border-collapse: collapse;" border="1">
		<tr>
			<td>eeeeeee</td>
			<td>ffffffff</td>
		</tr>
		<tr>
			<td>gggggggg</td>
			<td>hhhhhhhh</td>
		</tr>
	</table>
</body>
</html>

我们就直接在页面将信息修改了，而且大家可以看到，超链接在这里失效，因为点击超链接，页面会认为你要修改文字，那怎么解决这个问题呢？

也简单，在哪个标签内使用contentEditable属性，则它内部所有元素都会拥有这个属性

比如我们现在定义两个块ｄｉｖ和ｓｐａｎ＜ｄｉｖ＞＜ｓｐａｎ＞＜／ｓｐａｎ＞＜ｄｉｖ＞

如果ｄｉｖ块的contentEditable的值为true，那么ｓｐａｎ块内部的元素也是可以被修改的，解决方案就是，把你不想让别人修改的部分的contentEditable属性值设置为false，举例如下：

＜ｄｉｖ　contentEditable＝＂true＂＞＜ｓｐａｎ　contentEditable＝＂false＂＞＜／ｓｐａｎ＞＜ｄｉｖ＞

这样问题就解决了

designMode

这个属性的用法和contentEditable很类似，差别就是，使它生效的值为“ｏｎ”而不是“ｔｒuｅ”

大家可以都尝试着玩一玩，操作也十分简单，如果作者的文章有问题，欢迎批评指正，如果作者讲的还不够清楚，有朋友没有理解，也欢迎评论，我们一起探讨学习

潇雪凌宇

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML５——使用户可编辑页面的contentEditable属性与designMode属性

HTML５之新增属性contentEditable、designMode，这两个属性。使用户可以直接编辑网页页面内的内容，非常有趣，大家一起来玩呀！！！contentEditable值：true／false（true代表可编辑，false相反）我们来玩一下<!DOCTYPE html><html><head> <meta http-...
复制链接

扫一扫

专栏目录