Dict.CN 在線詞典, 英語學(xué)習(xí), 在線翻譯
 
 


 
 
 


          
	

          都市淘沙者
          

          荔枝FM Everyone can be host
          

          


          
	
		

          統(tǒng)計
          
	
		

          留言簿(23)
          


        

          積分與排名
          


		
		
          優(yōu)秀學(xué)習(xí)網(wǎng)站
          
		
				
			
	
		
          友情連接
          
		
				
			
	

        

          閱讀排行榜
          


		

          評論排行榜
          


	

          

          
	
					
	
          
		
          
			Js表單常用處理方法
		
          
		
          JavaScript表單處理[JavaScript高級程序設(shè)計] 
          
          //表單
          
          var FormUtil = new Object();
          
          //表單中的文本框
          
          var TextUtil = new Object();
          
          //表單中的列表框和組合框<select>
          
          var ListUtil = new Object();
          

          
                      /*
          
             * 聚焦于第一個表單字段
          
             * 接受一個參數(shù)：表單Id
          
                       */
          
            FormUtil.focusFirstField           = function(sFormId)
          
                      {
          
                          var oElements = document.getElementById(sFormId).elements;
          
                          for(var i=0; i<oElements.length; i++)
          
                          {
          
                              if(oElements[i].type != "hidden")
          
                              {
          
                        oElements[i].focus();
          
                                  return;
          
                    }
          
                }
          
            }          ;
          
            
          
                      /*
          
             * 如何讓表單僅提交一次？
          
             * <input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();" />
          
             * 不能使用提交按鈕并用onclick來實(shí)現(xiàn)，因為按鈕被禁用在表單被提交之前
          
                       */
          
            
          
                      /*
          
             * 為頁面中的所有文本框添加 自動選擇文本 功能
          
             * 兩種類型的文本框(單行文本框，多行文本框)都支持select()方法，這個方法可以選中文本框中的所有文本
          
             * 為了達(dá)到這個功能，文本框必須已經(jīng)獲得焦點(diǎn)
          
                       */
          
            FormUtil.setTextboxes           = function()
          
                      {
          
                          var colInputs = document.getElementsByTagName("input");
          
                          var colTextAreas = document.getElementsByTagName("textarea")
          
                          for(var i=0; i<colInputs.length; i++)
          
                          {
          
                              var obj = colInputs[i];
          
                              if(obj.type == "text" || obj.type == "password")
          
                              {
          
                        obj.onfocus           = function(){this.select();}
          
                    }
          
                }
          
                          for(var i=0; i<colTextAreas.length; i++)
          
                          {
          
                    colTextAreas[i].onfocus           = function(){this.select();}
          
                }
          
            }          ;
          
            
          
                      /*
          
             * 自動切換功能
          
             * 當(dāng)用戶輸入字符個數(shù)達(dá)到文本框所允許的最大數(shù)量字符時，自動切換到下一個字段
          
             * 前提：文本框具有maxlength屬性
          
             * 接受一個參數(shù)：文本框本身
          
             * 此方法必須在輸入每一個字符后調(diào)用，所以需要使用onkeyup事件處理函數(shù)
          
                       */
          
            FormUtil.tabForward           = function(oTextbox)
          
                      {
          
                          var oForm = oTextbox.form;
          
                          if(oForm.elements[oForm.elements.length-1] != oTextbox && oTextbox.value.length == oTextbox.maxLength)
          
                          {
          
                              for(var i=0; i<oForm.elements.length; i++)
          
                              {
          
                                  if(oForm.elements[i] == oTextbox)
          
                                  {
          
                                      for(var j=i+1; j<oForm.elements.length ; j++)
          
                                      {
          
                                          if(oForm.elements[j].type != "hidden")
          
                                          {
          
                                    oForm.elements[j].focus();
          
                                              return;
          
                                }
          
                            }
          
                                      return;
          
                        }
          
                    }
          
                }
          
            }          ;
          
            
          
            
          
                      /*
          
             * 限制textarea的字符數(shù)
          
             * <textarea>元素并沒有maxlength屬性，解決方法是用JavaScript來模仿maxlength特性
          
             * 原理：isNotMax()的返回值被傳給事件處理函數(shù)，這是一種阻止事件默認(rèn)行為發(fā)生的原始的方法
          
             * 當(dāng)文本長度小于imax時，方法返回true,表示keypress事件可以繼續(xù)發(fā)生。
          
             * 另外，方法的調(diào)用必須放到onkeypress事件處理函數(shù)中，keypress事件是在文本被插入到文本框之前觸發(fā)的
          
             * 注意：需要為textarea添加maxlength(盡管無效),但使用XHTML的嚴(yán)格版本時，如果頁面包含未預(yù)期的特性將會被認(rèn)為無效
          
             * 根據(jù)頁面的要求，可能需要通過JavaScript為DOM結(jié)點(diǎn)添加特性或者直接為函數(shù)傳遞額外的信息，而不能使用HTML特性
          
             * 接受兩個參數(shù)，第二個參數(shù)可選擇
          
             * Example:
          
             * <textarea rows="10" cols="25" maxlength="150" onkeypress="return TextUtil.isNotMax(this,200)"></textarea>
          
                       */
          
            TextUtil.isNotMax           = function(oTextArea,iMaxLength)
          
                      {
          
                          var imax;
          
                          if(iMaxLength)
          
                   imax           = iMaxLength;
          
                          else
          
                   imax           = oTextArea.getAttribute("maxlength");
          
                          return oTextArea.value.length != imax;
          
            }          ;
          
            
          
                      /*
          
             * 很多開發(fā)人員會遺忘的文本驗證的一個重要方面就是用戶可以直接向文本框粘貼內(nèi)容
          
             * 有兩種方法來處理粘貼內(nèi)容的驗證：禁止粘貼 當(dāng)文本框失去焦點(diǎn)時驗證
          
             * 1.禁止粘貼方法
          
             * 用戶可以通過點(diǎn)擊上下文菜單來粘貼或者按下Ctrl+V
          
             * 在IE中解決方法很簡單，因為有paste事件，如果paste事件處理函數(shù)阻止默認(rèn)行為就不會進(jìn)行任何粘貼操作
          
             * 關(guān)于其他瀏覽器，首先要做的是阻止上下文菜單，可以通過oncontextmenu事件處理函數(shù)中返回false來實(shí)現(xiàn)
          
             * 然后要阻止用戶按下Ctrl+V進(jìn)行的粘貼
          
             * 2.失去焦點(diǎn)時驗證
          
                       */
          
                      //此方法須與blockChars一起使用
          
                      TextUtil.blurBlock = function(oTextbox)
          
                      {
          
                          var sInvalidChars = oTextbox.getAttribute("invalidchars");
          
                          //以空字符串為參數(shù)調(diào)用split方法將分割字符串的每個字符
          
                          var arrInvalidChars = sInvalidChars.split("");
          
                
          
                          for(var i=0; i<arrInvalidChars.length; i++)
          
                          {
          
                              if(oTextbox.value.indexOf(arrInvalidChars[i]) > -1)
          
                              {
          
                        alert(          "Character '" + arrInvalidChars[i] + "' not allowed!");
          
                        oTextbox.focus();
          
                        oTextbox.select();
          
                                  return;
          
                    }
          
                }
          
            }          ;
          
                      //此方法與allowChars一起使用
          
                      TextUtil.blurAllow = function(oTextbox)
          
                      {
          
                          var sValidChars = oTextbox.getAttribute("validchars");
          
                          var arrTextChars = oTextbox.value.split("");
          
                
          
                          for(var i=0; i<arrTextChars.length; i++)
          
                          {
          
                              if(sValidChars.indexOf(arrTextChars[i]) == -1)
          
                              {
          
                        alert(          "Character '" + arrTextChars[i] + "' not allowed.");
          
                        oTextbox.focus();
          
                        oTextbox.select();
          
                                  return ;
          
                    }
          
                }
          
            }          ;
          
                      /*
          
             * 阻止文本框中的字符
          
             * 需要阻止文本框粘貼，bBlockPaste設(shè)置為true
          
                       */
          
            TextUtil.blockChars           = function(oEvent,oTextbox,bBlockPaste)
          
                      {
          
                oEvent           = EventUtil.formatEvent(oEvent);
          
                          var sInvalidChars = oTextbox.getAttribute("invalidchars");
          
                          var sChar = String.fromCharCode(oEvent.charCode);
          
                
          
                          var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
          
                          /*
          
                 * 用戶可能按下Ctrl鍵，再按其他字符(例如Ctrl+C)，所以如果按下Ctrl鍵也返回true
          
                           */
          
                          if(bBlockPaste)
          
                          {
          
                              return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");
          
                }
          
                          else return bIsValidChar || oEvent.ctrlKey;
          
            }          ;
          
                      /*
          
             * 允許有效的字符
          
             * 需要阻止文本框粘貼，bBlockPaste設(shè)置為true
          
                       */
          
            TextUtil.allowChars           = function(oEvent,oTextbox,bBlockPaste)
          
                      {
          
                oEvent           = EventUtil.formatEvent(oEvent);
          
                          var sChar = String.fromCharCode(oEvent.charCode);
          
                          var sValidChars = oTextbox.getAttribute("validchars");
          
                          var bIsValidChar = sValidChars.indexOf(sChar) >= 0;
          
                
          
                          if(bBlockPaste)
          
                          {
          
                              return bIsValidChar && !(oEvent.ctrlKey && sChar =="v");
          
                }
          
                          else return bIsValidChar || oEvent.ctrlKey;
          
            }          ;
          
            
          
            
          
                      /*
          
             * <select>默認(rèn)情況下渲染成組合框，如果添加size屬性則渲染成列表框
          
             * 可以在列表框中選擇多個選項（組合框不能),只要添加multiple屬性為"multiple"
          
             * 如果允許多個選項，selectedIndex將包含第一個選中的索引,但這沒有多大用途
          
                       */
          
            ListUtil.getSelectedIndexes           = function(oListbox)
          
                      {
          
                          var arrIndexes = new Array();
          
                          for(var i=0; i<oListbox.options.length; i++)
          
                          {
          
                              if(oListbox.options[i].selected)
          
                        arrIndexes.push(i);
          
                }
          
                          return arrIndexes;
          
            }          ;
          
            
          
                      //添加選項     第三個參數(shù)：選項值并非必要
          
                      ListUtil.add = function(oListbox,sName,sValue)
          
                      {
          
                          var oOption = document.createElement("option");
          
                oOption.appendChild(document.createTextNode(sName));
          
                          if(arguments.length == 3)
          
                          {
          
                    oOption.setAttribute(          "value",sValue);
          
                }
          
                
          
                oListbox.appendChild(oOption);
          
            }          ;
          
            
          
                      // 刪除某個選項
          
                      ListUtil.remove = function(oListbox,iIndex)
          
                      {
          
                oListbox.remove(iIndex);
          
            }          ;
          
            
          
                      //清除所有選項
          
                      ListUtil.clear = function(oListbox)
          
                      {
          
                          for(var i=oListbox.length-1; i>=0; i--)
          
                          {
          
                    ListUtil.remove(oListbox,i);
          
                }
          
            }          ;
          
            
          
                      /*
          
             * 移動選項
          
             * 將選項從一個列表框移動到另一個列表框
          
             * 使用DOM appendChild方法，如果將已經(jīng)存在于文檔中的元素傳遞給這個方法，那么會將這個元素從原來父結(jié)點(diǎn)中刪除
          
                       */
          
            ListUtil.move           = function(oListboxFrom, oListboxTo, iIndex)
          
                      {
          
                          var oOption = oListboxFrom.options[iIndex];
          
                
          
                          if(oOption != null)
          
                          {
          
                    oListboxTo.appendChild(oOption);
          
                }
          
            }          ;
          
            
          
                      //重新排序選項之向上移動
          
                      ListUtil.shiftUp = function(oListbox, iIndex) 
          
                      {
          
                          if(iIndex>0)
          
                          {
          
                              var oOption = oListbox.options[iIndex];
          
                              var oPreOption = oListbox.options[iIndex-1];
          
                    oListbox.insertBefore(oOption,oPreOption);
          
                }
          
            }          ;
          
            
          
                      //重新排序選項之向下移動
          
                      ListUtil.shiftDown = function(oListbox, iIndex)
          
                      {
          
                          if(iIndex < oListbox.options.length-1)
          
                          {
          
                              var oOption = oListbox.options[iIndex];
          
                              var oNextOption = oListbox.options[iIndex+1];
          
                    oListbox.insertBefore(oNextOption,oOption);
          
                }
          
            }          ;
          
             
          

		
          
			posted on 2008-09-26 15:56 都市淘沙者 閱讀(945) 評論(0)  編輯  收藏  所屬分類: JSP/PHP 
		
          
	
          
	
	


	


          
	    
    




          








          

				

          



    







          
        
	




主站蜘蛛池模板：
宣恩县|
鄂州市|
怀安县|
蕲春县|
乳源|
弋阳县|
息烽县|
乌审旗|
金川县|
平利县|
修水县|
永城市|
墨玉县|
浑源县|
呼和浩特市|
额敏县|
顺义区|
五原县|
山东|
伊宁县|
黄平县|
获嘉县|
黄浦区|
阜平县|
泾川县|
鹰潭市|
清水县|
淮阳县|
太谷县|
琼结县|
武宁县|
余庆县|
彩票|
北宁市|
那曲县|
孙吴县|
青田县|
德庆县|
清新县|
青川县|
渝北区|