【H5新增元素和文档结构】新的全局属性 1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 隐藏 7. spellcheck 语法检查 8. translate 可翻译

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

 

目录：

1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 隐藏 7. spellcheck 语法检查 8. translate 可翻译

 

1. contentEditable 可编辑内容

如果元素的 contentEditable 未指定为 true/false, 则是否可编辑取决于其父元素，如果父元素可编辑，则该元素是可编辑的。

在 JS 脚本中有一个属性 isContentEditable ,当元素可编辑该属性的值为 true，不可编辑则为 false。

① 使包含框的文本变成可编辑的

语句：

<div contenteditable="true">
    <p>1234</p>
</div>
<!-- 下面没加 contenteditable 属性，包含框内内容不可编辑 -->
<div>
    <p>1234</p>
</div>

页面表现：

 

2. contextmenu 快捷菜单

用于定义上下文菜单，右击时出现。

① 用 contextmenu 属性定义 <div>元素的上下文菜单，其中 contextmenu 属性的值是要打开的 <menu> 元素的 id 属性值。

语句：

<div contextmenu="mymenu">上下文菜单
    <menu type="context" id="mymenu">
        <menuitem label="微信分享"></menuitem>
    </menu>
</div>

页面表现：

上下文菜单中没有出现预想的效果，去查了一下，只有Firefox 8.0版本以上的浏览器支持 menuitem 属性。且目前只有 Firefox 支持 contextmenu 属性。

 

 

3. data 自定义属性

使用 data-* 属性可以自定义用户数据。存储的自定义数据可以被 JS 脚本 利用。当浏览器解析时，会忽略前缀 “data-”，取用其后的自定义属性。

① 使用 JS 脚本访问每个列表项目的 type 属性值

语句：

<ul>
    <li data-animal-type="bird">猫头鹰</li>
    <li data-animal-type="fish">鲤鱼</li>
    <li data-animal-type="spider">蜘蛛</li>
</ul>
<script>
var list = document.getElementsByTagName("li");
for( var i=0; i<list.length; i++ ){
    console.log(list[i].dataset.animalType);    //通过元素的 dataset. 对象获取元素的自定义属性的值
}                                               //复合属性名如 animal-type 访问时使用 animalType
</script>

页面表现：

 

 

4. draggable 可拖动

draggable 属性定义元素是否可以被拖动。属性取值：

true: 定义元素可拖动

false: 定义元素不可拖动

auto: 定义使用浏览器的默认行为

 

5. dropzone 拖动数据

目前所有主流浏览器都不支持 dropzone 属性

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

copy: 拖动数据会产生被拖动数据的副本

move: 拖动数据会导致被拖动数据被移动到新位置

link: 拖动数据会产生向原始数据的链接

 

6. hidden 隐藏

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

① 使用 hidden 属性定义段落文本隐藏显示

语句：

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

页面表现：

 

 

 

 

7. spellcheck 语法检查

可以对以下内容进行拼写检查: 1. input 元素中的文本值、<textarea>元素中的文本、可编辑元素中的文本

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

① 设计两段文本，第一段文本可编辑，可语法检查；第二段文本可编辑，但不允许语法检查。当编辑文本时，第一段显示检查状态，而第二段忽略。

语句：

<div contenteditable="true">
    <p spellcheck="true">accesskey</p>
    <p spellcheck="false">accesskey</p>
</div>

页面表现：

效果暂时没看懂。

 

8. translate 可翻译

translate 属性定义是否应该翻译元素内容

① 使用 translate 属性

语句：

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

页面表现：