HTML5--常见的新属性（前）

最新推荐文章于 2023-10-24 14:02:23 发布

maomaolaoshi

最新推荐文章于 2023-10-24 14:02:23 发布

阅读量1.7k

点赞数 2

分类专栏： html5 文章标签： html5 常见新属性拖放事件元素拖放文件拖放

本文链接：https://blog.csdn.net/maomaolaoshi/article/details/78157801

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5新增了一些新的属性（或者为旧的元素赋予了新的意义），这些属性都为我们带来了些什么改变呢？
新增的属性划分：
①全局属性
②JavaScript属性
③表单相关属性
④iframe标签属性
⑤链接相关属性
⑥其他属性

全局属性

全局属性包括data-* 、hidden、spellcheck、tabindex、contenteditable、contextmenu、draggable、dropzone、translate等属性。
其中只有contextmenu属性，主流浏览器尚未实现之外，其他属性都具有较好的兼容性。

**data-*属性**

作用

存储页面或应用程序的私有自定义数据。自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

属性解析

data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。该属性可以是任何字符串。

使用方法：

<ul>
    <li data-animal-type="bird">Owl</li>
    <li data-animal-type="fish">Salmon</li> 
    <li data-animal-type="spider">Tarantula</li> 
</ul>

注意：自定义属性前缀 “data-” 会被客户端忽略
浏览器支持：所有主流浏览器都支持 data-* 属性。

hidden属性

作用：

规定对元素进行隐藏。隐藏的元素不会被显示。可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。

属性解析：

该属性对属性的隐藏方式是display:none;，也就是说隐藏的元素不会占据页面空间。

使用方法：

<p hidden>这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>

注意：在 XHTML 中, 属性禁止简写，hidden 属性必须定义为 <element hidden="hidden">

最低浏览器版本号支持：

属性	chrome	Firefox	Safari	IE	Opera
hidden	6.0	4.0	5.1	11.0	11.1

spellcheck属性

作用：

规定是否对元素内容进行拼写检查。(个人感觉这个属性有点儿鸡肋。第一，该属性目前只能检测英文拼写，不能检测中文；第二，英文只能检测单个英文单词，如果句子或短语中单词出错则不能检测；第三，检测效果不明显。具体和浏览器有关，有的浏览器（360浏览器）检测效果就经常出现不了（红色波浪线会经常显示不出来）)。

属性解析：

语法：<element spellcheck="true|false">
该属性可对以下文本进行拼写检查：
- 类型为 text 的 input 元素中的值（非密码）
- textarea 元素中的值
- 可编辑元素中的值

使用方法：

<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
First name: <input type="text" name="fname" spellcheck="true">

最低浏览器版本号支持：

属性	chrome	Firefox	Safari	IE	Opera
spellcheck	9.0	2.0	5.1	10.0	11.5

tabindex属性

tabindex属性并非HTML5新增属性，但是HTML5赋予了它新的含义。

作用：

tabindex 属性规定当使用 “tab” 键进行导航时元素的顺序。

属性解析：

当设置了tabindex属性之后，tab键的导航顺序跟元素的位置无关，只跟tabindex属性值的有关。tabindex属性值不能为负数，导航顺序从1开始，依次往下增加。不过当属性值为0的时候，会变成导航顺序的最后一个。

使用方法：

<a href="http://www.runoob.com//" tabindex="2"> runoob.com</a><br/>
<a href="http://www.baidu.com/" tabindex="1">baidu</a><br/>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

注意：在 HTML5 中, tabindex 属性可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。
在 HTML 4.01中, tabindex 属性可用于: <a>, <area>, <button>, <input>, <object>, <select>, 和 <textarea>。

浏览器支持：所有主流浏览器都支持 tabindex 属性。

contenteditable属性

作用：

指定元素内容是否可编辑。

属性解析：

语法：<element contenteditable="true|false">
true 指定元素是可编辑的；
false 指定元素是不可编辑的

使用方法：

<p contenteditable="true">这是一个可编辑段落。</p>

注意：当元素中没有设置 contenteditable 属性时，元素将从父元素继承。
浏览器支持：所有主流浏览器都支持contenteditable 属性。

contextmenu、translate、dropzone属性

contextmenu、dropzone、translate属性放在一块讲是因为主流浏览器对他们的兼容性都非常的差，大家只要稍作了解就好。
①contextmenu
作用：规定了元素的上下文菜单。

②dropzone
作用：规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。

③translate
作用：规定元素内容是否要翻译。

上述属性，只有contextmenu属性被Firefox支持，其他主流浏览均不支持这三个属性。

draggable属性

作用：

规定元素是否可拖动。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

属性解析：

语法：<element draggable="true|false|auto">
true：规定元素是可拖动的。
false：定元素是不可拖动的。
auto：用浏览器的默认特性。（链接和图像默认是可拖动的。）

为了丰富元素拖动的操作，HTML5还提供了相关的处理事件，以更好的支持拖放。

CSS代码

.part1,.part2,.part3,.part4{padding:10px;box-shadow:2px 2px 2px #999;border:1px solid #999;width:550px;margin:50px auto 0;overflow:hidden}
h3,h4{margin:auto;text-align:center}
.left{width:50%;float:left}
.right{float:right;width:50%}
.dropZone{margin:auto;width:200px;height:200px;border:1px solid #999;text-align:center;line-height:200px}
#data{font-size:.8em;margin:auto;width:220px}

<section class="part1">
        <h3>常规拖动</h3>
        <div>
            <p draggable="true">我是一段可以拖动的段落</p>
            <p draggable="auto">我是默认可以拖放的段落</p>
            <p draggable="false">我不允许拖放的段落</p>
        </div>
    </section>

效果图：
这里写图片描述

处理拖动事件：

当用户拖动元素时，可以触发以下事件。

名称	说明
dragstart	在元素开始被拖动时触发
drag	在元素被拖动时触发
dragend	在拖动操作完成时触发

在拖动过程中，drag事件每隔几毫秒就会触发一次。

创建释放区：

当我们要在指定元素中处理拖动元素时，我们需要处理进入、移动、释放、离开等事件。

名称	说明
dragenter	当被拖动元素进入释放区所占据的屏幕空间时触发
dragover	当被拖动元素在释放区内移动触发
dragleave	当被拖动元素没有被放下就离开释放区时触发
drop	当被拖动元素在释放区里放下时触发

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的项目，如果我们要接受被拖放的项目则需要阻止默认事件。

 <section class="part2">
        <h3>拖动+放置</h3>
        <div class="left">
            <h4>拖动区</h4>
            <p draggable="true" id="part2_1">一段可以拖动的段落</p>
            <p>拖动当前状态：
                <span id="state1"> </span>
            </p>
        </div>
        <div class="right">
            <h4>放置区</h4>
            <div id="dropZone">
            </div>
            <p>释放区当前状态：
                <span id="state2"> </span>
            </p>
        </div>
    </section>
    <script>
        +(function(){
            //拖动演示区
            var p2 = document.getElementById("part2_1"),
            state2_1 = document.getElementById("state2_1");
        p2.ondragstart = function () {
            state2_1.innerHTML = "目标元素开始被拖动";
        }
        p2.ondrag = function () {
            state2_1.innerHTML = "目标元素正在被拖动";
        }
        p2.ondragend = function () {
            state2_1.innerHTML = "目标元素拖动操作完成";
        }
        //放置演示区
        var dropZone2_1=document.getElementById("dropZone2_1"),
            state2_2 = document.getElementById("state2_2");
            dropZone2_1.ondragenter=function(e){
                e.preventDefault();
                state2_2.innerHTML = "进入释放区";
            }
            dropZone2_1.ondragover=function(e){
                e.preventDefault();
                state2_2.innerHTML = "正在释放区移动";
            }
            dropZone2_1.ondragleave=function(e){
                state2_2.innerHTML = "离开释放区";
            }
            dropZone2_1.ondrop=function(e){
                state2_2.innerHTML = "释放元素在释放区";
                e.preventDefault(); 
            }
        })()
    </script>

效果图
这里写图片描述

如果不阻止dragenter和dragover的默认事件，那么drop事件就无法触发。
（笔者在最新的Firefox（56.0）进行测试，发现Firefox对上述的事件支持都很差，只有dragstart事件正常触发了，其他都失败了。Safari（5.1.7）不支持drop事件，其他事件都能很好地支持。360（极速模式）和chrome则是对所有事件都能够很好地支持。）

DataTransfer对象

与拖放操作所触发的事件同时派发的对象是DragEvent，它派生于MouseEvent。DataTransfer对象就是DragEvent对象的一个新增对象属性之一，用于返回传输数据到释放区。

名称	说明	返回
types	返回数据的格式	字符串数组
getData(`<format>`)	返回数据的格式	字符串
setData（`<format>,<data>`）	设置指定格式的数据	void
clearData（`<format>`）	移除指定格式的数据	void
files	返回已被拖动文件的列表	FileList

<section class="part3">
        <h3>使用DataTransfer对象</h3>
        <div class="left">
                <h4>拖动区</h4>
                <p draggable="true" id="part3_1">一段可以拖动的段落</p>
            </div>
            <div class="right">
                <h4>放置区</h4>
                <div id="dropZone3_1" class="dropZone">
                        目标区
                </div>
            </div>
        <p>当前状态：
            <span id="state3_1"></span>
         </p>
    </section>
    <script>
        +(function(){
            var p3 = document.getElementById("part3_1"),
            state3_1 = document.getElementById("state3_1"),
            dropZone3_1= document.getElementById("dropZone3_1");
            //阻止默认事件
            dropZone3_1.ondragenter=handleDrag;
            dropZone3_1.ondragover=handleDrag;
            function handleDrag(e){
                e.preventDefault();
            }

        p3.ondragstart=function(e){
            e.dataTransfer.setData("Text",e.target.id);//为一个给定的类型设置数据。(设置id的传送格式)
            state3_1.innerHTML="元素开始被拖动";
        }
        p3.ondragover=function(e){
            state3_1.innerHTML="元素正在被拖动";
        }
        p3.ondragend=function(e){
            state3_1.innerHTML="拖动结束";
        }
        dropZone3_1.ondrop=function(e){
            var droppedId=e.dataTransfer.getData("Text");//取得给定类型的数据.（获取指定格式的id）
            var newElem=document.getElementById(droppedId).cloneNode(true);
            p3.parentNode.removeChild(p3);
            dropZone3_1.innerHTML="";
            dropZone3_1.appendChild(newElem);
            e.preventDefault();//针对Firefox的怪异行为
        }
        })()
    </script>

效果图
这里写图片描述
不得不说Firefox（56.0）真的很神奇：Firefox如果不通过DataTransfer对象setData和getData方法是无法触发dragstart、dragover、dragend等一系列事件的。同时如果不阻止drop的默认事件，那么在释放元素之后，浏览器会关闭网页，并重新显示包含拖动元素的网页。

File对象

当用户拖放的不是元素而是文件时，DataTransfer对象的文件属性会返回一个FileList对象。该对象是一个由File对象构成的数组，它具有以下这些属性：

名称	说明	返回
name	获取文件名	字符串
type	获取文件类型，以MIME类型表示	字符串
size	获取文件大小(以字节计算)	数值

 <section class="part4">
        <div class="left">
            <h3>文件放置区</h3>
            <div id="dropZone4_1" class="dropZone">
                请拖动文件至此
            </div>
        </div>
        <div class="right">
            <h3>文件信息</h3>
            <table id="data" border="1">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>大小</th>
                </tr>
            </table>
        </div>
    </section>
     <script>
        +(function () {
            var target = document.getElementById("dropZone4_1"),
                data = document.getElementById("data");
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;

            function handleDrag(e) {
                e.preventDefault();
            }
            target.ondrop = function (e) {
                var files = e.dataTransfer.files;
                for (var i = 0; i < files.length; i++) {
                    var row = "<tr><td>" +
                        files[i].name + "</td><td>" +
                        files[i].type + "</td><td>" +
                        files[i].size + "</td><tr>";
                        data.innerHTML+=row;
                }
                e.preventDefault();
            }

        })()
    </script>

效果图
这里写图片描述

JavaScript属性

HTML5新增的JavaScript属性是指新增的事件属性。事件属性包括window事件属性、form事件、keyboard事件、mouse事件以及media事件。
粗体表示比较常见。

Window 事件属性

Window事件主要应用到<body>标签中。window事件属性添加了非常多事件属性。包括：

属性	值	描述
onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeonload	script	在文档加载之前运行的脚本。
onbeforeunload	script	即将离开当前页面（刷新或关闭）时触发的脚本
onerror	script	在错误发生时运行的脚本。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当window对象隐藏时运行的脚本（在用户离开网页时触发）。离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。onpagehide 事件有时可以替代 onunload 事件，但 onunload 事件触发后无法缓存页面。
onpageshow	script	当window对象可见时运行的脚本（在用户浏览网页时触发）。onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
onpopstate	script	当window对象历史记录改变时运行的脚本。
onredo	script	当文档执行回滚（redo）时运行的脚本。
onundo	script	在文档执行撤销（undo）时运行的脚本。
onunload	script	在用户退出页面时触发的脚本。发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。

Form事件属性

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内)

属性	值	描述
oncontextmenu	script	当触发上下文菜单时运行脚本。在元素中用户右击鼠标时触发并打开上下文菜单。
onformchange	script	在表单改变时运行的脚本。
onforminput	script	当表单获得用户输入时运行的脚本。
oninput	script	当元素获得用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。

Mouse事件属性

属性	值	描述
ondrag	script	当拖动元素时运行脚本
ondragend	script	当拖动操作结束时运行脚本
ondragenter	script	当元素被拖动至有效的拖放目标时运行脚本
ondragleave	script	当元素离开有效拖放目标时运行脚本
ondragover	script	当元素被拖动至有效拖放目标上方时运行脚本
ondragstart	script	当拖动操作开始时运行脚本
ondrop	script	当被拖动元素正在被拖放时运行脚本
onmousewheel	script	当转动鼠标滚轮时运行脚本
onscroll	script	当滚动元素的滚动条时运行脚本

Media事件属性

通过视频（videos），图像（images）或者音频（audio）触发该事件，多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):

属性	值	描述
oncanplay	script	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange	script	当媒介长度改变时运行脚本
onemptied	script	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended	script	当媒介已抵达结尾时运行脚本
onerror	script	当在元素加载期间发生错误时运行脚本
onloadeddata	script	当加载媒介数据时运行脚本
onloadedmetadata	script	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart	script	当浏览器开始加载媒介数据时运行脚本
onpause	script	当媒介数据暂停时运行脚本
onplay	script	当媒介数据将要开始播放时运行脚本
onplaying	script	当媒介数据已开始播放时运行脚本
onprogress	script	当浏览器正在取媒介数据时运行脚本
onratechange	script	当媒介数据的播放速率改变时运行脚本
onreadystatechange	script	当就绪状态（ready-state）改变时运行脚本
onseeked	script	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseeking	script	当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled	script	当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend	script	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate	script	当媒介改变其播放位置时运行脚本
onvolumechange	script	当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting	script	当媒介已停止播放但打算继续播放时（播放过程中被暂停时）运行脚本

本文分成三章，本章是HTML5–常见的新属性（前），下一章是HTML5–常见的新属性（中）。
本文到此结束，希望对大家也有所帮助。

maomaolaoshi

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5--常见的新属性（前）

HTML5新增了一些新的属性（或者为旧的元素赋予了新的意义），这些属性都为我们带来了些什么改变呢？新增的属性划分： ①全局属性 ②JavaScript属性 ③表单相关属性 ④iframe标签属性 ⑤链接相关属性 ⑥其他属性全局属性全局属性包括data-* 、hidden、spellcheck、tabindex、contenteditable、contextmenu、d
复制链接

扫一扫