制作圖片代替按鈕的提交效果：
<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為鍵盤輸入事件，它是當鍵盤上的一個鍵被下壓時，就會發(fā)生onKeyDown事件
如果有多個文本框，都想實現(xiàn)回車切換輸入效果，用一個統(tǒng)一的對象的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事件
解釋：判斷按下回車鍵的控件類型：不能是按鈕、提交按鈕、不能為空，在除此之外的其他控件類型上，只要按回車鍵，就實現(xiàn)Tab切換效果
event.srcElement表示返回觸發(fā)事件的元素
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()方法驗證輸入
制作內容動態(tài)改變的層特效：(類似于手機充值、點卡切換效果)
第一種：
通過改變DIV的innerHTML,適用于動態(tài)顯示的內容較少時
第二種：
當動態(tài)顯示的內容較多，并相對固定時，則應該預先制作好DIV內容
然后使用myDiv.style.display="none/block"，來動態(tài)改變層的隱藏或顯示
制作過程：
1.制作靜態(tài)頁面
2.分別添加2個層，用來顯示切換效果
3.寫一個初始化DIV1層不顯示的函數(shù)InitDIV()
function InitDIV(){
document.getElementByIdx_x("DIV1").style.display="none";
}
<body onload="InitDIV()"> //頁面加載時，自動隱藏DIV1層
4.編寫函數(shù)，用來顯示和隱藏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";
}
}