隨筆 - 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 閱讀(102) 評論(0)  編輯  收藏


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


          網站導航:
           
          主站蜘蛛池模板: 积石山| 武陟县| 苍梧县| 当涂县| 佛冈县| 宝清县| 陇川县| 嫩江县| 新丰县| 泸西县| 舟曲县| 获嘉县| 东平县| 天等县| 苍梧县| 雅安市| 巴青县| 株洲县| 崇州市| 北碚区| 石屏县| 梧州市| 莱州市| 清流县| 芮城县| 临高县| 徐闻县| 珲春市| 囊谦县| 江西省| 株洲市| 塔城市| 罗山县| 班玛县| 乌审旗| 浙江省| 鹤山市| 平乐县| 堆龙德庆县| 甘德县| 海晏县|