点击这里给我发消息 点击这里给我发消息

HTML 5与CSS 3权威指南:contentEditable属性

添加时间:2013-12-6
    相关阅读: 开发 HTML CSS 微软
 

2.4   全局属性

在HTML 5中,新增了一个"全局属性"的概念。所谓全局属性,是指可以对任何元素都使用的属性,本节将详细介绍几种常用的全局属性。

2.4.1   contentEditable属性

contentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容,所以该元素必须是可以获得鼠标焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性,可以被指定为true或false.

除此之外,该属性还有个隐藏的inherit(继承)状态,属性为true时,元素被指定为允许编辑;属性为false时,元素被指定为不允许编辑;未指定true或false时,则由inherit状态来决定,如果元素的父元素是可编辑的,则该元素就是可编辑的。

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

代码清单2-2中给出了一个使用contentEditable属性的示例,当列表元素被加上contentEditable属性后,该元素就变成可编辑的了,读者可自行在浏览器中对该示例进行试验。

代码清单2-2   contentEditable属性示例
 
  <!DOCTYPE html>

  <head>

  <meta charset="UTF-8">

  <title>contentEditalbe属性示例</title>

  </head>

  <h2>可编辑列表</h2>

  <ul contentEditable="true">

  <li>列表元素1</li>

  <li>列表元素2</li>

  <li>列表元素3</li>

  </ul>

这段代码运行后的结果如图2-2所示。

图2-2   可编辑列表示例

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

最后,在这里列举一下支持contentEditable属性的元素:defaults、A、ABBR、ACRONYM、ADDRESS、B、BDO、BIG、BLOCKQUOTE、BODY、BUTTON、CENTER、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.

 

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册