表單驗證的相關事件和輔助特效
制作圖片代替按鈕的提交效果:
<img src="images/regquick.jpg" width="114" height="27" onClick="checkForm()" onmouseover="cursor:pointer">
通過onclick事件,調用方法checkForm檢查或提交
function checkForm(){
//讓txtUserName獲得焦點
//提交
}
制作回車切換輸入的效果:
function changeFocus(){
//判斷按鍵是否是回車鍵
//設置按鍵為Tab鍵
}
<input type="text" onKeyDown="changeFocus()">
onKeyDown為鍵盤輸入事件,它是當鍵盤上的一個鍵被下壓時,就會發生onKeyDown事件
如果有多個文本框,都想實現回車切換輸入效果,用一個統一的對象的onKeyDown事件來代替,可以增加代碼的復用性。
function changeFocus(){
document.onKeyDown = changeFocus;
//document對象的onKeyDown事件
解釋:判斷按下回車鍵的控件類型:不能是按鈕、提交按鈕、不能為空,在除此之外的其他控件類型上,只要按回車鍵,就實現Tab切換效果
event.srcElement表示返回觸發事件的元素
event.srcElement.type表示捕獲事件元素的類型,對應HTML中的元素的type值
制作輸入提示的特效:
首先插入一個層,用來做提示信息
<div id="loginError" style="display:inline">
設置DIV的顯示方式為inline,即和文本同一行
function checkLogin(){
color='red'>用戶名不能為空</font>";
}
<input type="text" onblur="checkLogin()">
當失去焦點時,調用checkLogin()方法驗證輸入
制作內容動態改變的層特效:(類似于手機充值、點卡切換效果)
第一種:
通過改變DIV的innerHTML,適用于動態顯示的內容較少時
第二種:
當動態顯示的內容較多,并相對固定時,則應該預先制作好DIV內容
然后使用myDiv.style.display="none/block",來動態改變層的隱藏或顯示
制作過程:
1.制作靜態頁面
2.分別添加2個層,用來顯示切換效果
3.寫一個初始化DIV1層不顯示的函數InitDIV()
function InitDIV(){
}
<body onload="InitDIV()"> //頁面加載時,自動隱藏DIV1層
4.編寫函數,用來顯示和隱藏2個層的切換
function displayDIV(){
//表示是否選中了第一個單選按鈕
document.getElementByIdx_x("DIV1").style.display="block";
document.getElementByIdx_x("DIV2").style.display="block";
}