我們經(jīng)常會要求用戶在文本框中輸入特定的數(shù)據(jù)，或者輸入特定格式的數(shù)據(jù)。例如，必須包含某些 字符，或者必須匹配某種模式。由于文本框在默認情況下沒有提供多少驗證數(shù)據(jù)的手段，因此必須使用 JavaScript來完成此類過濾輸入的操作。而綜合運用事件和 DOM手段，就可以將普通的文本框轉換成能 夠理解用戶輸入數(shù)據(jù)的功能型控件。

1. 屏蔽字符

有時候，我們需要用戶輸入的文本中包含或不包含某些字符。例如，電話號碼中不能包含非數(shù)值字 符。如前所述，響應向文本框中插入字符操作的是 keypress 事件。因此，可以通過阻止這個事件的默 認行為來屏蔽此類字符。在極端的情況下，可以通過下列代碼屏蔽所有按鍵操作。

EventUtil.addHandler(textbox, "keypress", function(event){

event = EventUtil.getEvent(event);

EventUtil.preventDefault(event);

});

運行以上代碼后，由于所有按鍵操作都將被屏蔽，結果會導致文本框變成只讀的。如果只想屏蔽特 定的字符，則需要檢測 keypress 事件對應的字符編碼，然后再決定如何響應。例如，下列代碼只允許 用戶輸入數(shù)值。

EventUtil.addHandler(textbox, "keypress", function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

var charCode = EventUtil.getCharCode(event);

if (!/d/.test(String.fromCharCode(charCode))){

EventUtil.preventDefault(event); }

});

在這個例子中，我們使用 EventUtil.getCharCode()實現(xiàn)了跨瀏覽器取得字符編碼。然后，使 用 String.fromCharCode()將字符編碼轉換成字符串，再使用正則表達式 /d/ 來測試該字符串，從 而確定用戶輸入的是不是數(shù)值。如果測試失敗，那么就使用 EventUtil.preventDefault()屏蔽按鍵 事件。結果，文本框就會忽略所有輸入的非數(shù)值。

雖然理論上只應該在用戶按下字符鍵時才觸發(fā) keypress 事件，南昌網(wǎng)站建設公司百恒網(wǎng)絡前端工程師提醒大家，但有些瀏覽器也會對其他鍵觸發(fā)此 事件。Firefox 和 Safari(3.1 版本以前)會對向上鍵、向下鍵、退格鍵和刪除鍵觸發(fā) keypress 事件; Safari 3.1及更新版本則不會對這些鍵觸發(fā) keypress 事件。這意味著，僅考慮到屏蔽不是數(shù)值的字符還 不夠，還要避免屏蔽這些極為常用和必要的鍵。所幸的是，要檢測這些鍵并不困難。在 Firefox 中，所 有由非字符鍵觸發(fā)的 keypress 事件對應的字符編碼為 0，而在 Safari 3以前的版本中，對應的字符編 碼全部為 8。為了讓代碼更通用，只要不屏蔽那些字符編碼小于 10的鍵即可。故而，可以將上面的函數(shù) 重寫成如下所示。

EventUtil.addHandler(textbox, "keypress", function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

var charCode = EventUtil.getCharCode(event);

if (!/d/.test(String.fromCharCode(charCode)) && charCode > 9){

EventUtil.preventDefault(event);

} });

這樣，我們的事件處理程序就可以適用所有瀏覽器了，即可以屏蔽非數(shù)值字符，但不屏蔽那些也會 觸發(fā) keypress 事件的基本按鍵。

除此之外，還有一個問題需要處理：復制、粘貼及其他操作還要用到 Ctrl 鍵。在除 IE 之外的所有 瀏覽器中，前面的代碼也會屏蔽 Ctrl+C、Ctrl+V，以及其他使用 Ctrl的組合鍵。因此，后還要添加一 個檢測條件，以確保用戶沒有按下 Ctrl鍵，如下面的例子所示。

EventUtil.addHandler(textbox, "keypress", function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

var charCode = EventUtil.getCharCode(event);

if (!/d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){

EventUtil.preventDefault(event); }

});

經(jīng)過后一點修改，就可以確保文本框的行為完全正常了。在這個例子的基礎上加以修改和調整， 就可以將同樣的技術運用于放過和屏蔽任何輸入文本框的字符。

2. 操作剪貼板

IE是第一個支持與剪貼板相關事件，以及通過 JavaScript訪問剪貼板數(shù)據(jù)的瀏覽器。IE的實現(xiàn)成為 了事實上的標準，不僅 Safari 2、Chrome和 Firefox 3也都支持類似的事件和剪貼板訪問(Opera不支持通過 JavaScript訪問剪貼板)，HTML 5后來也把剪貼板事件納入了規(guī)范。下列就是 6個剪貼板事件。

beforecopy：在發(fā)生復制操作前觸發(fā)。

copy：在發(fā)生復制操作時觸發(fā)。

beforecut：在發(fā)生剪切操作前觸發(fā)。

cut：在發(fā)生剪切操作時觸發(fā)。

beforepaste：在發(fā)生粘貼操作前觸發(fā)。

paste：在發(fā)生粘貼操作時觸發(fā)。

由于沒有針對剪貼板操作的標準，這些事件及相關對象會因瀏覽器而異。在 Safari、Chrome和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示針對文本框的上下文菜單(預期將發(fā) 生剪貼板事件)的情況下觸發(fā)。但是，IE則會在觸發(fā) copy、cut 和 paste 事件之前先行觸發(fā)這些事件。 至于 copy、cut 和 paste 事件，只要是在上下文菜單中選擇了相應選項，或者使用了相應的鍵盤組合 鍵，所有瀏覽器都會觸發(fā)它們。

在實際的事件發(fā)生之前，通過 beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā) 送數(shù)據(jù)，或者從剪貼板取得數(shù)據(jù)之前修改數(shù)據(jù)。不過，取消這些事件并不會取消對剪貼板的操作——只 有取消 copy、cut 和 paste 事件，才能阻止相應操作發(fā)生。

要訪問剪貼板中的數(shù)據(jù)，可以使用 clipboardData 對象：在 IE中，這個對象是 window 對象的 屬性;而在 Firefox 4+、Safari和 Chrome中，這個對象是相應 event 對象的屬性。但是，在 Firefox、 Safari和 Chorme中，只有在處理剪貼板事件期間 clipboardData 對象才有效，這是為了防止對剪貼板 的未授權訪問;在 IE 中，則可以隨時訪問 clipboardData 對象。為了確?？鐬g覽器兼容性，好只 在發(fā)生剪貼板事件期間使用這個對象。

這個 clipboardData 對象有三個方法：getData()、setData()和 clearData()。其中，getData() 用于從剪貼板中取得數(shù)據(jù)，它接受一個參數(shù)，即要取得的數(shù)據(jù)的格式。在 IE中，有兩種數(shù)據(jù)格式："text" 和"URL"。在 Firefox、Safari 和 Chrome 中，這個參數(shù)是一種 MIME 類型;不過，可以用"text"代表 "text/plain"。

類似地，setData()方法的第一個參數(shù)也是數(shù)據(jù)類型，第二個參數(shù)是要放在剪貼板中的文本。對于 第一個參數(shù)，IE 照樣支持"text"和"URL"，而 Safari 和 Chrome 仍然只支持 MIME 類型。但是，與 getData()方法不同的是，Safari和 Chrome的 setData()方法不能識別"text"類型。這兩個瀏覽器在 成功將文本放到剪貼板中后，都會返回 true;否則，返回 false。為了彌合這些差異，我們可以向 EventUtil 中再添加下列方法。

var EventUtil = {

//省略的代碼

getClipboardText: function(event){

var clipboardData = (event.clipboardData || window.clipboardData);

return clipboardData.getData("text");

},

//省略的代碼

setClipboardText: function(event, value){

if (event.clipboardData){

return event.clipboardData.setData("text/plain", value);

} else if (window.clipboardData){

return window.clipboardData.setData("text", value);

} },

//省略的代碼

};

這里的 getClipboardText()方法相對簡單;它只要確定 clipboardData 對象的位置，然后再 以"text"類型調用 getData()方法即可。相應地，setClipboardText()方法則要稍微復雜一些。在 取得clipboardData 對象之后，需要根據(jù)不同的瀏覽器實現(xiàn)為setData()傳入不同的類型(對于Safari 和 Chrome，是"text/plain";對于 IE，是"text")。

在需要確保粘貼到文本框中的文本中包含某些字符，或者符合某種格式要求時，能夠訪問剪貼板是非 常有用的。例如，如果一個文本框只接受數(shù)值，那么就必須檢測粘貼過來的值，以確保有效。在 paste 事件中，可以確定剪貼板中的值是否有效，如果無效，就可以像下面示例中那樣，取消默認的行為。

EventUtil.addHandler(textbox, "paste", function(event){

event = EventUtil.getEvent(event);

var text = EventUtil.getClipboardText(event);

if (!/^d*$/.test(text)){

EventUtil.preventDefault(event); }

});

在這里，onpaste 事件處理程序可以確保只有數(shù)值才會被粘貼到文本框中。如果剪貼板的值與正 則表達式不匹配，則會取消粘貼操作。Firefox、Safari和 Chrome只允許在 onpaste 事件處理程序中訪 問 getData()方法。

由于并非所有瀏覽器都支持訪問剪貼板，所以更簡單的做法是屏蔽一或多個剪貼板操作。在支持 copy、cut 和 paste 事件的瀏覽器中(IE、Safari、Chrome和 Firefox 3及更高版本)，很容易阻止這些 事件的默認行為。在 Opera中，則需要阻止那些會觸發(fā)這些事件的按鍵操作，同時還要阻止在文本框中 顯示上下文菜單。

本文僅限內部技術人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌APP開發(fā)公司-百恒網(wǎng)絡 http://m.gimmickmag.com/ 如轉載請注明出處!