手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >HTML5 自动聚焦(autofocus)属性使用介绍
HTML5 自动聚焦(autofocus)属性使用介绍
摘要:原文:HTML5autofocusAttribut原文发布时间:2012年08月27日翻译时间:2013年8月6日HTML5推出了一大堆精彩...

原文 : HTML5 autofocus Attribut

原文发布时间: 2012年08月27日

翻译时间: 2013年8月6日

HTML5 推出了一大堆精彩的东西给我们。

过去我们要用JavaScript和Flash完成的任务,比如表单验证,输入框空白提示(INPUT placeholders),客户端文件上传下载(client side file naming),以及 音频/视频播放,现在都可以用基本的HTML来完成了。另一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成。

代码就如下面一样简单:

<>

<input autofocus="autofocus" />

<button autofocus="autofocus">Hi!</button>

<textarea autofocus="autofocus"></textarea>

当 autofocus 属性设置以后,input,textarea,以及button 元素在页面加载(load)以后,会被自动选中(即获得焦点). 我尝试其他元素(比如h1 标签),tabIndex=0的情况,但是autofocus属性在这些元素上根本没有效果。

这个属性在主要目的是获取用户输入的页面(pages whose main purpose is collecting information)是很有用的,比如google首页(99%的情况是用来搜索)或者在线安装向导(比如WordPress's installer).而且最关键在于——不需要JavaScript参与。

完整的页面代码如下:

<!DOCTYPE HTML>

<html>

<head>

<title> HTML5 autofocus属性测试 </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="renfufei@qq.com">

<meta name="Description" content="original=http://davidwalsh.name/autofocus">

</head>

<body>

<>

<>

<div>

<input autofocus="autofocus" />

<button autofocus="autofocus">Hi!</button>

<textarea autofocus="autofocus"></textarea>

</div>

</body>

</html>

【HTML5 自动聚焦(autofocus)属性使用介绍】相关文章:

html5 canvas 使用示例

html5 CSS过度-webkit-transition使用介绍

HTML5实现锚点时请使用id取代name

HTML5 Canvas像素处理使用接口介绍

HTML5 audio标签使用js进行播放控制实例

HTML5 的新的表单元素(datalist/keygen/output)使用介绍

HTML5之语义标签介绍

HTML5 video 视频标签使用介绍

HTML5中事件属性简介

HTML5 placeholder(空白提示)属性介绍

精品推荐
分类导航