亚洲精品无码Av人在线观看国产,亚洲国产精品网站久久,久久久亚洲精品视频

Js表單常用處理方法

JavaScript表單處理[JavaScript高級程序設計]

//表單

var FormUtil = new Object();

//表單中的文本框

var TextUtil = new Object();

//表單中的列表框和組合框<select>

var ListUtil = new Object();

* 聚焦于第一個表單字段

* 接受一個參數：表單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來實現，因為按鈕被禁用在表單被提交之前

* 為頁面中的所有文本框添加自動選擇文本功能

* 兩種類型的文本框(單行文本框，多行文本框)都支持select()方法，這個方法可以選中文本框中的所有文本

* 為了達到這個功能，文本框必須已經獲得焦點

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();}

}

};

* 自動切換功能

* 當用戶輸入字符個數達到文本框所允許的最大數量字符時，自動切換到下一個字段

* 前提：文本框具有maxlength屬性

* 接受一個參數：文本框本身

* 此方法必須在輸入每一個字符后調用，所以需要使用onkeyup事件處理函數

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的字符數

* <textarea>元素并沒有maxlength屬性，解決方法是用JavaScript來模仿maxlength特性

* 原理：isNotMax()的返回值被傳給事件處理函數，這是一種阻止事件默認行為發生的原始的方法

* 當文本長度小于imax時，方法返回true,表示keypress事件可以繼續發生。

* 另外，方法的調用必須放到onkeypress事件處理函數中，keypress事件是在文本被插入到文本框之前觸發的

* 注意：需要為textarea添加maxlength(盡管無效),但使用XHTML的嚴格版本時，如果頁面包含未預期的特性將會被認為無效

* 根據頁面的要求，可能需要通過JavaScript為DOM結點添加特性或者直接為函數傳遞額外的信息，而不能使用HTML特性

* 接受兩個參數，第二個參數可選擇

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

};

* 很多開發人員會遺忘的文本驗證的一個重要方面就是用戶可以直接向文本框粘貼內容

* 有兩種方法來處理粘貼內容的驗證：禁止粘貼當文本框失去焦點時驗證

* 1.禁止粘貼方法

* 用戶可以通過點擊上下文菜單來粘貼或者按下Ctrl+V

* 在IE中解決方法很簡單，因為有paste事件，如果paste事件處理函數阻止默認行為就不會進行任何粘貼操作

* 關于其他瀏覽器，首先要做的是阻止上下文菜單，可以通過oncontextmenu事件處理函數中返回false來實現

* 然后要阻止用戶按下Ctrl+V進行的粘貼

* 2.失去焦點時驗證

//此方法須與blockChars一起使用

TextUtil.blurBlock = function(oTextbox)

{

var sInvalidChars = oTextbox.getAttribute("invalidchars");

//以空字符串為參數調用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設置為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設置為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>默認情況下渲染成組合框，如果添加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;

};

//添加選項第三個參數：選項值并非必要

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方法，如果將已經存在于文檔中的元素傳遞給這個方法，那么會將這個元素從原來父結點中刪除

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 都市淘沙者閱讀(944) 評論(0) 編輯收藏所屬分類: JSP/PHP

新用戶注冊刷新評論列表


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




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 深入解析form標簽 JavaScript prototype原型對象 IE和FireFox下通用的Javascript模擬回車－－點擊事件(轉) Js表單常用處理方法控制textarea文本長度,限制輸入字數(帶統計)的特效[zhuan] 也談一下文件上傳說說大型高并發高負載網站的系統架構不同Web主機上的Servlet之間數據對象的相互傳輸(轉) Servlet 監聽器應用（轉） B/S系統權限控制的一種簡單方法 (轉)

都市淘沙者

導航

公告

隨筆分類

文章分類

隨筆檔案

文章檔案

相冊

統計

留言簿(23)

積分與排名

優秀學習網站

友情連接

閱讀排行榜

評論排行榜

Js表單常用處理方法