HTML 新全局特性

2020-03-09 10:51:02 阅读：251 来源： 互联网

标签：浏览器 accesskey 特性快捷键点击 HTML 全局 ev data

1.contenteditable属性

作用：如果该属性为true，则该DOM元素可以编辑

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

2.data-*（*为自定义字符串，例：data-a）

作用：可以储存一些自定义数据，和winfrom中的tag类似

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function showDetails(animal)
{
    var animalType = animal.getAttribute("data-animal-type");
    alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

3.draggable

作用：可拖拽属性

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>
</html>

图片拖拽和文字拖拽的代码一样，只是标签不一样（换成img）不一样而已。

4.spellcheck

作用：检测元素是否拼写错误，用于检测输入英文正确性，可以和contenteditable属性一起使用

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

First name: <input type="text" name="fname" spellcheck="true">

<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p>

</body>
</html>

5.accesskey 属性

作用：设置快捷键

<a href="//www.runoob.com/html/html-tutorial.html" accesskey="h">HTML 教程</a><br>
<a href="//www.runoob.com/css/css-tutorial.html" accesskey="c">CSS 教程</a>

提示： 各种浏览器下accesskey快捷键的使用方法：

IE浏览器

按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车.

FireFox浏览器

按住Alt+Shift键，点击accesskey定义的快捷键.

Chrome浏览器

按住Alt键，点击accesskey定义的快捷键.

Opera浏览器

按住Shift键，点击esc，出现本页定义的accesskey快捷键列表可供选择.

Safari浏览器

按住Alt键，点击accesskey定义的快捷键.

标签：浏览器,accesskey,特性,快捷键,点击,HTML,全局,ev,data
来源： https://www.cnblogs.com/daimaxuejia/p/12447217.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML 新全局特性