4.4　HTML5全局属性

HTML5除了支持HTML4原有的全局属性之外，还添加了8个新的全局属性。所谓全局属性是指可以用于任何HTML元素的属性。

4.4.1　可编辑内容

contenteditable属性的主要功能是允许用户可以在线编辑元素中的内容。contenteditable是一个布尔值属性，可以指定为true或false。

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

【示例】在下面的示例中为正文文本包含框<div>标签加上contenteditable属性后，该包含框包含的文本就变成可编辑的了，浏览者可自行在浏览器中修改内容，执行结果如图4.11所示。

图4.11　可编辑文本

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

4.4.2　快捷菜单

contextmenu属性用于定义元素的上下文菜单。所谓上下文菜单，就是会在用户右键单击元素时出现。

【示例】下面的示例是使用contextmenu属性定义div元素的上下文菜单，其中contextmenu属性的值是要打开的menu元素的id属性值。

当用户右键单击元素时，会弹出一个上下文菜单，从中可以选择指定的快捷菜单项目，如图4.12所示。

图4.12　打开上下文菜单

4.4.3　自定义属性

使用data-*属性可以自定义用户数据。具体应用包括如下两点。

• 　data-*属性用于存储页面或元素的私有数据。
• 　data-*属性赋予所有HTML元素嵌入自定义属性的能力。

存储的自定义数据能够被页面的JavaScript脚本利用，以创建更好的用户体验，方便Ajax调用或服务器端数据库查询。

data-*属性包括以下两部分。

• 　属性名：不应该包含任何大写字母，并且在前缀"data-"之后必须有至少一个字符。
• 　属性值：可以是任意字符串。

当浏览器解析时，会忽略前缀"data-"，取用其后的自定义属性。

【示例1】下面的示例是使用data-*属性为每个列表项目定义一个自定义属性type。这样在JavaScript脚本中可以判断每个列表项目包含信息的类型。

【示例2】以上面的示例为基础，下面的示例是使用JavaScript脚本访问每个列表项目的type属性值，演示效果如图4.13所示。

图4.13　访问列表项目的type属性值

访问元素的自定义属性，可以通过元素的dataset.对象获取，该对象存储了元素所有自定义属性的值。访问规则与CSS脚本化访问相同。对于复合属性名，通过驼峰命名法访问，如animal-type，访问时使用animalType，避免连字符在脚本中引发的歧义。

注意，目前IE暂不支持这种访问方式。

4.4.4　定义可拖动操作

draggable属性可以定义元素是否可以被拖动。属性取值说明如下。

• 　true：定义元素可拖动。
• 　false：定义元素不可拖动。
• 　auto：定义使用浏览器的默认行为。

draggable属性常用在拖放操作中，详细说明请参考后面章节的“拖放API”。

4.4.5　拖动数据

dropzone属性定义在元素上拖动数据时，是否复制、移动或链接被拖动数据。属性取值说明如下。

• 　copy：拖动数据会产生被拖动数据的副本。
• 　move：拖动数据会导致被拖动数据被移动到新位置。
• 　link：拖动数据会产生指向原始数据的链接。

例如：

    <div dropzone="copy"></div>

4.4.6　隐藏元素

在HTML5中，所有元素都包含一个hidden属性。该属性设置元素的可见状态，取值为一个布尔值，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。

【示例】下面使用hidden属性定义段落文本隐藏显示。

    <p hidden><img src="images/1.jpg" width="200" /></p>

hidden属性可用于防止用户查看元素，直到匹配某些条件，如选择了某个复选框。然后，在页面加载之后，可以使用JavaScript脚本删除该属性，删除之后该元素变为可见状态，同时元素中的内容也即时显示出来。

4.4.7　语法检查

spellcheck属性定义是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查。

• 　input元素中的文本值（非密码）。
• 　textarea元素中的文本。
• 　可编辑元素中的文本。

spellcheck属性是一个布尔值的属性，取值包括true和false，为true时表示对元素进行拼写和语法检查，为false时则不检查元素。用法如下。

    <!--以下两种书写方法正确-->
    <textarea spellcheck="true" >
    <input type=text spellcheck=false>
    <!--以下书写方法错误-->
    <textarea spellcheck >

注意，如果元素的readonly属性或disabled属性设为true，则不执行拼写检查。

【示例】下面的示例设计两段文本，第一段文本可编辑、可语法检查；第二段文本可编辑，但不允许语法检查。当编辑文本时，第一段文本显示检查状态，而第二段忽略，效果如图4.14所示。

图4.14　段落文本检查状态比较

4.4.8　翻译内容

translate属性定义是否应该翻译元素内容。取值说明如下。

• 　yes：定义应该翻译元素内容。
• 　no：定义不应翻译元素内容。

【示例】下面的示例演示了如何使用translate属性。

    <p translate="no">请勿翻译本段。</p>
    <p>本段可被译为任意语言。</p>