5个你不知道的HTML5的接口介绍

2020-03-24 16:18:29

字体：大中小

来源：转载

供稿：网友

原文地址：autofocus Attribute
autofocus 属性确保当页面加载后，给定的 BUTTON,INPUT或者 TEXTAREA 元素能够自动获得焦点。

复制代码代码如下:
input autofocus="autofocus" /
button autofocus="autofocus" Hi! /button
textarea autofocus="autofocus" /textarea

autofocus 属性主要用在简单的输入页面，详情请参考：autofocus 属性
各浏览器厂商对这些API的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的API，您将会对他们了解和掌握更多。
部分的测试代码如下：

复制代码代码如下:
!DOCTYPE html
html
head
title 5个你不知道的 HTML5 API接口演示 /title
meta name="Generator" content="EditPlus"
meta name="Author" content="renfufei@qq.com"
meta name="Description" content="original=http://davidwalsh.name/html5-apis"
style
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff; top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
/style
script
// 显示警告信息
function warn(msg){
warn = warn || "一个未知警告!";
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除，没有则添加
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实，本函数 toggleClassList 如果支持的话，
// 那么下面的代码就不会被执行，此处仅作演示,请灵活应用
// 2. classList API
// element 的class属性是否包含 hide 这个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};
// 使用className属性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || "";
// 去掉首尾的空白
cName = cName.replace(/^/s*|/s*$/g,"");
// cName 中间如果含有空白字符，则失败. 如果要好好处理，可以拆分为数组，单个处理
var blankReg = //s+/;
if(blankReg.test(cName)){
warn("'"+cName+"'中间含有空白字符");
return false;
}
// 正则， /b 表示可见连续字符的边界，可以这么理解:
// "hide2 hide hide myname" 那么，
// hide2 的前后各有一个虚拟的/b ,hide 前后也有，
// 但是 hi 和 de之间则没有。
// g 表示单行全局
//var rep = //bhide/b/g;
var rep = new RegExp("//b" + cName + "//b", "g");
if(rep.test(className)){
className = className.replace(rep,"");
} else {
className += " "+cName;
}
// 替换新className。
element.className = className;
return true;
};
// 函数，切换(元素id，className)
function toggleClass(elementId,cName){
// 获取一个DOM元素
var element = document.getElementById(elementId);
// 如果不存在元素
if(!element){
warn("id为"+elementId+"的元素不存在");
return false;
}
if(!element.classList){
warn("id为"+elementId+"的元素不支持classList属性，将使用其他手段来实现");
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById("intro");
// 注意这个不是 id属性哦，是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:"+id
+",website:"+website
+",blogUrl:"+blogUrl
+",myName:"+myName
;
//
warn(msg);
};
// dom加载后执行
window.addEventListener("DOMContentLoaded", function() {
var open = document.getElementById("open");
var close = document.getElementById("close");
open.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
close.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
//
testDataset();
}, false);
/script
/head
body
div
div id="diary2"
a href="javascript:void(0)" _fcksavedurl=""javascript:void(0)"" id="close" 关闭 /a
div id="loading"
img src="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" alt=""

div 正在加载中 /div
/div
/div
div
a href="javascript:void(0)" id="open" 打开 /a
/div
/div
div
!-- contextmenu 指定了使用哪个上下文菜单。 --
!-- !!!不知道为什么，我的浏览器上这个配置不起作用。 --
section contextmenu="mymenu"
h1 点击此区域查看菜单 /h1
!--
为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方:
--
!-- 添加菜单,至于图片图标，请自己设置。add the menu --
menu type="context" id="mymenu"
menuitem label="刷新页面" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" /menuitem
menu label="分享到..." icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png"
menuitem label="新浪微博" icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png" /menuitem
menuitem label="腾讯微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" /menuitem /menuitem
/menu
/menu
/section
/div
div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url="http://blog.csdn.net/renfufei" /div
/body
/html
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇： XML与HTML之间的优势互补（下）

下一篇：针对HTML5的Web Worker使用攻略