隨筆 - 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)  編輯  收藏


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


          網站導航:
           
          主站蜘蛛池模板: 邢台市| 安仁县| 上栗县| 湖北省| 宁武县| 济宁市| 阳曲县| 汝南县| 嘉黎县| 台山市| 衡阳市| 石河子市| 富阳市| 淮安市| 邵武市| 宿松县| 通州区| 昌吉市| 富阳市| 原平市| 平凉市| 屏东市| 陆丰市| 政和县| 宜君县| 灵宝市| 南汇区| 思南县| 木兰县| 安多县| 龙泉市| 广东省| 沧州市| 邵阳县| 宣威市| 华宁县| 临漳县| 虹口区| 莱州市| 五河县| 临江市|