html5属性

发表于

临近年关，时间比较多，就看了下html5的东西，发现这些不太常见的属性还是蛮好玩的，记录下，便于今后检索查找。

accesskey

<element accesskey="character">,绑定快捷键用的，通过Alt + character 就能触发。

  • 几乎所有浏览器均 accesskey 属性，除了 Opera。
  • 支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

contenteditable与spellcheck

<element contenteditable="true|false">是元素内容是否可编辑。
<element spellcheck="true|false">是否对元素进行拼写和语法检查。

  • 所有主流浏览器都支持 contenteditable 属性。
  • Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。
  • spellcheck可检测的是
    • input 元素中的文本值（非密码）
    • <textarea>元素中的文本
    • 可编辑元素中的文本

translate

<element translate="yes|no">规定不应翻译某些元素。

  • 基本上浏览器都不支持。测试当前新版本chrome是支持的。
  • 推荐使用class="notranslate"代替。
1
2
3
4
<p class="notranslate">class="notranslate"</p>
<p notranslate="no">notranslate</p>
<p notranslate="yes">translate</p>
<!-- 谷歌翻译的时候，最新版chrome仅最后一条为中文 -->

draggable

<element draggable="true|false|auto">元素是否可以被拖拽。

  • Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。
  • 链接和图像默认是可拖动的。

其中有几个要点：

  • DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
  • draggable 属性：就是标签元素要设置draggable=true，否则不会有效果
  • ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
  • ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
  • ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
  • ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
  • ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
  • Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用document的ondragover事件把它去掉。
  • Event.effectAllowed 属性：就是拖拽的效果。

参考链接
http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-拖拽与拖放简介/
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

------本文结束 感谢阅读------