JavaScript学习笔记1---焦点定位在页面表单第一个字段
来源:互联网 发布:ubuntu 重置网络 编辑:程序博客网 时间:2024/04/30 18:26
当我们希望一打开某个页面,焦点能够停留在第一个控件上的时候,可以写个简单的脚本,
然后放到onload事件处理函数中,比如说下面的一段代码:
<html>
<head>
<title>用户注册</title>
</head>
<body onload="document.forms[0].elements[0].focus()">
<form name="form1">
用 户 名:<input type="text" name="txtName" size="20" /><br />
密 码:<input type="password" name="txtPassword" size="20" /><br />
确认密码:<input type="password" name="txtRePassword" size="20" /><br />
电子信箱:<input type="text" name="txtEmail" size="20" /><br />
<input type="submit" name="submitForm1" value="注 册" /><br />
</form>
</html>
<head>
<title>用户注册</title>
</head>
<body onload="document.forms[0].elements[0].focus()">
<form name="form1">
用 户 名:<input type="text" name="txtName" size="20" /><br />
密 码:<input type="password" name="txtPassword" size="20" /><br />
确认密码:<input type="password" name="txtRePassword" size="20" /><br />
电子信箱:<input type="text" name="txtEmail" size="20" /><br />
<input type="submit" name="submitForm1" value="注 册" /><br />
</form>
</html>
当用户打开页面,焦点是可以定位在第一个字段的。document.forms[0].elements[0].focus()
表示把光标定位在页面上第一个表单的第一个元素上,如上例,就是txtName字段。
但是考虑一下下面的这段代码:
<html>
<head>
<title>用户注册</title>
</head>
<body onload="document.forms[0].elements[0].focus()">
<form name="form1">
<input type="hidden" name="txtID" value="123456" /><br />
用 户 名:<input type="text" name="txtName" size="20" /><br />
密 码:<input type="password" name="txtPassword" size="20" /><br />
确认密码:<input type="password" name="txtRePassword" size="20" /><br />
电子信箱:<input type="text" name="txtEmail" size="20" /><br />
<input type="submit" name="submitForm1" value="注 册" /><br />
</form>
</html>
<head>
<title>用户注册</title>
</head>
<body onload="document.forms[0].elements[0].focus()">
<form name="form1">
<input type="hidden" name="txtID" value="123456" /><br />
用 户 名:<input type="text" name="txtName" size="20" /><br />
密 码:<input type="password" name="txtPassword" size="20" /><br />
确认密码:<input type="password" name="txtRePassword" size="20" /><br />
电子信箱:<input type="text" name="txtEmail" size="20" /><br />
<input type="submit" name="submitForm1" value="注 册" /><br />
</form>
</html>
表单form1的第一个字段是隐藏字段,这个字段是不支持focus()方法的。在这种情况下,将
会出现JavaScript错误。并且这个时候我们也不是想把光标定位在那个不可见的字段上。这
里的关键是把焦点定位在第一个可见的表单字段上,可以写个处理的方法:
<html>
<head>
<title>用户注册</title>
<script type="text/javascript">
//焦点定位在表单第一个可见字段的方法
function focusOnFirst(){
//检测页面是否存在表单
if(document.forms.length>0){
for(var i=0;i<document.forms[0].elements.length;i++){
var oField=document.forms[0].elements[i];
if(oField.type!="hidden"){
oField.focus();
return;
}
}
}
}
</script>
</head>
<body onload="focusOnFirst()">
<form name="form1">
<input type="hidden" name="txtID" value="123456" /><br />
用 户 名:<input type="text" name="txtName" size="20" /><br />
密 码:<input type="password" name="txtPassword" size="20" /><br />
确认密码:<input type="password" name="txtRePassword" size="20" /><br />
电子信箱:<input type="text" name="txtEmail" size="20" /><br />
<input type="submit" name="submitForm1" value="注 册" /><br />
</form>
</html>
<head>
<title>用户注册</title>
<script type="text/javascript">
//焦点定位在表单第一个可见字段的方法
function focusOnFirst(){
//检测页面是否存在表单
if(document.forms.length>0){
for(var i=0;i<document.forms[0].elements.length;i++){
var oField=document.forms[0].elements[i];
if(oField.type!="hidden"){
oField.focus();
return;
}
}
}
}
</script>
</head>
<body onload="focusOnFirst()">
<form name="form1">
<input type="hidden" name="txtID" value="123456" /><br />
用 户 名:<input type="text" name="txtName" size="20" /><br />
密 码:<input type="password" name="txtPassword" size="20" /><br />
确认密码:<input type="password" name="txtRePassword" size="20" /><br />
电子信箱:<input type="text" name="txtEmail" size="20" /><br />
<input type="submit" name="submitForm1" value="注 册" /><br />
</form>
</html>
测试上面的代码,光标确实可以定位在第一个表单的第一个可见字段。
- JavaScript学习笔记1---焦点定位在页面表单第一个字段
- JavaScript学习笔记1---焦点定位在页面表单第一个字段
- extjs表单第一个textfield获得焦点
- extjs表单第一个textfield获得焦点
- Django学习笔记---创建第一个页面
- 页面焦点定位问题
- Django学习1:第一个Web页面
- 页面第一个控件获得焦点(js实现)
- 第一个学习笔记
- 第一个学习笔记
- 《JavaScript学习笔记》:第一个面向对象的程序
- web开发学习笔记(1):dreamweaver+html+javascript第一个网页例子
- 第一个JavaScript学习例子
- DirectX11 学习笔记1 - 第一个程序
- Silverlight 初始页面定位焦点
- php学习第一个form表单
- 如何在页面中添加焦点 JavaScript实例
- JavaScript 在页面加载后自动设置焦点
- JavaScript学习笔记5--限制textarea的字符数
- JavaScript学习笔记4--模拟输入注册码时的自动切换字段
- JavaScript学习笔记3--文本框获得焦点,文本框里提示信息自动消失
- JavaScript学习笔记2--表单只提交一次
- ASP.NET 2.0 中的创建母版页
- JavaScript学习笔记1---焦点定位在页面表单第一个字段
- Artists
- 实现form中post大于100K的数据的解决方案
- 为王位而生 GeForce8800全面解析测试
- Windows常见基本进程六:ccenter
- Rational Rose 2003 下载及破解方法
- [短篇小说]孟婆汤
- 一个简单的客户端调用xmlHttp的ajax例子
- 指针与引用的区别