隨筆 - 0, 文章 - 75, 評論 - 0, 引用 - 0
          數據加載中……

          表單驗證的相關事件和輔助特效

          制作圖片代替按鈕的提交效果:


          <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";


          }


          }


           



          posted on 2012-04-22 15:18 hantai 閱讀(101) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 荥经县| 介休市| 淮南市| 仪陇县| 全州县| 晋宁县| 建始县| 崇礼县| 江陵县| 南开区| 镇雄县| 耿马| 凤山县| 阿拉善右旗| 红桥区| 通许县| 芒康县| 丰原市| 黄山市| 大邑县| 体育| 肇源县| 青州市| 洞头县| 青冈县| 桐乡市| 海伦市| 南皮县| 汉中市| 红安县| 开化县| 伊川县| 库伦旗| 重庆市| 浠水县| 固原市| 通道| 昌乐县| 新化县| 保德县| 抚州市|