• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例4-7 <input>元素中autofocus属性的使用

实例4-7 <input>元素中autofocus属性的使用

1.功能描述

在新建的表单中,创建两个文本输入框,一个用于输入“姓名”,另一个用于输入“密码”。输入“姓名”的文本框设置“autofocus”属性,当页面加载完成或单击表单“提交”按钮后,拥有“autofocus”属性的“姓名”输入文本框会自动获取焦点。

2.实现代码

在Dreamweaver CS5中新建一个HTML页面4-7.html,加入代码如代码清单4-7所示。

代码清单4-7 <input>元素中autofocus属性的使用

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>input元素中autofocus属性的使用</title>
	<link href="Css/css4.css" rel="stylesheet" type=" text/css">
	</head>
	<body>
	<form id="frmTmp">
	 <fieldset>
	   <legend>autofocus属4生:</legend>
	   <p>姓名:<inputtype="text" name="txtName" class="inputtxt" autofocus="true"></p>
	   <p>密码:<inputtype="password" name="txtPws" class="inputtxt"></p>
	   <p class="p_center">
	     <input name="frmSubmit" type="submit" class="inputbtn" value=”提交"/>
	     <input name="frmReset" type="reset" class:"inputbtn" value:"取消"/>
	   </p>
	 </fieldset>
	</form>
	</body>
	</html>

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图4-7所示。

图4-7 <input>元素的autofocus属性在Chrome10浏览器中使用时的页面效果

4.源码分析

在HTML4中,如果要使某个元素自动获取焦点,需要编写JavaScript代码实现。虽然这一功能的实现方便了用户的操作,但也带来了不少的弊端,例如,需要通过按空格键滚动页面时,而焦点还在表单的输入文本框中,因此,输入的空格只能显示在文本框中,并不能实现页面的滚动。

在HTML5中,由于实现这一功能的不再是JavaScript代码,而是元素的属性,因此,所有页面实现该功能的方法都是一致的,避免了由于代码实现的不同而效果不一样的情况。

注意

在一个页面表单中,建议只对一个输入框设置“autofocus”属性,例如在资料录入页面中,只对第一个文本输入框设置“autofocus”属性。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101