html5入门初学者笔记（十）- 全局属性（contentEditable属性）

最新推荐文章于 2024-06-27 16:19:12 发布

曾经小小少年

最新推荐文章于 2024-06-27 16:19:12 发布

阅读量2.1k

点赞数

分类专栏： html5

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

contentEditable是由微软开发的，被其他浏览器反编译并投入应用的一个全局属性。

1.允许用户编辑元素中的内容，该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素的内容允许编辑

2.contentEditable属性是一个布尔值属性，可以被指定为true或false

3.该属性还有个隐藏的inherit（继承）状态，当属性值为true时，元素被指定为允许编辑，当属性值为false时，元素被指定为不允许编辑，当未指定true或false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。

4.除了contentEditable属性外，元素还具有一个isContentEditable属性，当元素可编辑时，该属性值为true;当元素不可编辑时，该属性为false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>contentEditable属性示例</title>
</head>
<body>
    <h2>可编辑列表</h2>
    <ul contenteditable="true">
        <li>列表元素1</li>
        <li>列表元素2</li>
        <li>列表元素3</li>
    </ul>
</body>
</html>

在编辑完元素中的内容后，要想保存其中内容，只能把该元素的innerHTML发送到服务器端进行保存，因为改变元素内容后该元素的innerHTML内容也会随之改变，目前还没有特别的API来保存编辑后元素中的内容

最后，在这里列举一下支持contentEditable属性的元素：defaults、A、ABBR、ACRONYM、ADDRESS、B、BDO、BIG、BLOCKQUOTE、BODY、BUTTON、CECENTER、CITE、CODE、CUSTOM、DD、DEL、DFN、DIR、DIV、DL、DT、EM、FIELDSET、FONT、FORM、hn、I、INPUT type=button、INPUT type=password、INPUT type=radio、INPUT type=reset、INPUT type=submit、INPUT type=text、INS、ISINDEX、KBD、LABEL。