欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 自动聚焦(autofocus)属性行使先容

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

原文 : HTML5 autofocus Attribut
原文宣布时刻: 2012年08月27日
翻译时刻: 2013年8月6日
HTML5 推出了一大堆出色的对象给我们。
已往我们要用JavaScript和Flash完成的使命,好比表单验证,输入框空缺提醒(INPUT placeholders),客户端文件上传下载(client side file naming),以及 音频/视频播放,此刻都可以用根基的HTML来完成了。另一个简朴的HTML成果是此刻应承我们在页面加载完成后自动将输入核心定位到必要的元素,通过一个叫做 autofocus的属性完成。
代码就如下面一样简朴:


代码如下:
<!-- These all work! -->
<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>
<!-- 原则上,以下三个元素,只能有一个配置autofocus 属性,假如多个元素都配置,应该是最后一个元素获取了核心 -->
<!--
-->
<div>
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
</div>
</body>
</Html>

本文地址:http://itbyc.com/web/html5/13088.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1