制作图片代替按钮的提交效果:
<img src="images/regquick.jpg" width="114" height="27" onClick="checkForm()" onmouseover="cursor:pointer">
通过onclick事件,调用方法checkForm检查或提交
function checkForm(){
if(document.myform.txtUserName.value.length==0){
alert("用户名不能为空");
document.myform.txtUserName.focus();
//让txtUserName获得焦点
}
else{
document.myform.submit();
//提交
}
}
制作回车切换输入的效果:
function changeFocus(){
if(event.keyCode==13)
//判断按键是否是回车键
event.keyCode=9;
//设置按键为Tab键
}
<input type="text" onKeyDown="changeFocus()">
onKeyDown为键盘输入事件,它是当键盘上的一个键被下压时,就会发生onKeyDown事件
如果有多个文本框,都想实现回车切换输入效果,用一个统一的对象的onKeyDown事件来代替,可以增加代码的复用性。
function changeFocus(){
if(event.keyCode==13 && event.srcElement.type!='button' &&
event.srcElement.type!='submit' && event.srcElement.type!='')
event.keyCode=9;
}
document.onKeyDown = changeFocus;
//document对象的onKeyDown事件
解释:判断按下回车键的控件类型:不能是按钮、提交按钮、不能为空,在除此之外的其他控件类型上,只要按回车键,就实现Tab切换效果
event.srcElement表示返回触发事件的元素
event.srcElement.type表示捕获事件元素的类型,对应HTML中的元素的type值
制作输入提示的特效:
首先插入一个层,用来做提示信息
<div id="loginError" style="display:inline">
设置DIV的显示方式为inline,即和文本同一行
function checkLogin(){
var myDiv=document.getElementByIdx_x("loginError");
myDiv.innerHTML="";
var strName=document.userfrm.loginName.value;
if(strName.length==0){
myDiv.innerHTML="<font
color='red'>用户名不能为空</font>";
return;
}
}
<input type="text" onblur="checkLogin()">
当失去焦点时,调用checkLogin()方法验证输入
制作内容动态改变的层特效:(类似于手机充值、点卡切换效果)
第一种:
通过改变DIV的innerHTML,适用于动态显示的内容较少时
第二种:
当动态显示的内容较多,并相对固定时,则应该预先制作好DIV内容
然后使用myDiv.style.display="none/block",来动态改变层的隐藏或显示
制作过程:
1.制作静态页面
2.分别添加2个层,用来显示切换效果
3.写一个初始化DIV1层不显示的函数InitDIV()
function InitDIV(){
document.getElementByIdx_x("DIV1").style.display="none";
}
<body onload="InitDIV()"> //页面加载时,自动隐藏DIV1层
4.编写函数,用来显示和隐藏2个层的切换
function displayDIV(){
if(document.myform.methodRadio[0].checked==true){
//表示是否选中了第一个单选按钮
document.getElementByIdx_x("DIV1").style.display="block";
document.getElementByIdx_x("DIV2").style.display="none";
}
else{
document.getElementByIdx_x("DIV2").style.display="block";
document.getElementByIdx_x("DIV1").style.display="none";
}
}