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

1. 屏蔽字符

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

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

event = EventUtil.getEvent(event);

EventUtil.preventDefault(event);

});

運(yùn)行以上代碼后，由于所有按鍵操作都將被屏蔽，結(jié)果會(huì)導(dǎo)致文本框變成只讀的。如果只想屏蔽特 定的字符，則需要檢測(cè) keypress 事件對(duì)應(yīng)的字符編碼，然后再?zèng)Q定如何響應(yīng)。例如，下列代碼只允許 用戶輸入數(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); }

});

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

雖然理論上只應(yīng)該在用戶按下字符鍵時(shí)才觸發(fā) keypress 事件，南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端工程師提醒大家，但有些瀏覽器也會(huì)對(duì)其他鍵觸發(fā)此 事件。Firefox 和 Safari(3.1 版本以前)會(huì)對(duì)向上鍵、向下鍵、退格鍵和刪除鍵觸發(fā) keypress 事件; Safari 3.1及更新版本則不會(huì)對(duì)這些鍵觸發(fā) keypress 事件。這意味著，僅考慮到屏蔽不是數(shù)值的字符還 不夠，還要避免屏蔽這些極為常用和必要的鍵。所幸的是，要檢測(cè)這些鍵并不困難。在 Firefox 中，所 有由非字符鍵觸發(fā)的 keypress 事件對(duì)應(yīng)的字符編碼為 0，而在 Safari 3以前的版本中，對(duì)應(yīng)的字符編 碼全部為 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ù)值字符，但不屏蔽那些也會(huì) 觸發(fā) keypress 事件的基本按鍵。

除此之外，還有一個(gè)問(wèn)題需要處理：復(fù)制、粘貼及其他操作還要用到 Ctrl 鍵。在除 IE 之外的所有 瀏覽器中，前面的代碼也會(huì)屏蔽 Ctrl+C、Ctrl+V，以及其他使用 Ctrl的組合鍵。因此，后還要添加一 個(gè)檢測(cè)條件，以確保用戶沒(méi)有按下 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)過(guò)后一點(diǎn)修改，就可以確保文本框的行為完全正常了。在這個(gè)例子的基礎(chǔ)上加以修改和調(diào)整， 就可以將同樣的技術(shù)運(yùn)用于放過(guò)和屏蔽任何輸入文本框的字符。

2. 操作剪貼板

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

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

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

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

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

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

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

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

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

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

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

類似地，setData()方法的第一個(gè)參數(shù)也是數(shù)據(jù)類型，第二個(gè)參數(shù)是要放在剪貼板中的文本。對(duì)于 第一個(gè)參數(shù)，IE 照樣支持"text"和"URL"，而 Safari 和 Chrome 仍然只支持 MIME 類型。但是，與 getData()方法不同的是，Safari和 Chrome的 setData()方法不能識(shí)別"text"類型。這兩個(gè)瀏覽器在 成功將文本放到剪貼板中后，都會(huì)返回 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()方法相對(duì)簡(jiǎn)單;它只要確定 clipboardData 對(duì)象的位置，然后再 以"text"類型調(diào)用 getData()方法即可。相應(yīng)地，setClipboardText()方法則要稍微復(fù)雜一些。在 取得clipboardData 對(duì)象之后，需要根據(jù)不同的瀏覽器實(shí)現(xiàn)為setData()傳入不同的類型(對(duì)于Safari 和 Chrome，是"text/plain";對(duì)于 IE，是"text")。

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

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

event = EventUtil.getEvent(event);

var text = EventUtil.getClipboardText(event);

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

EventUtil.preventDefault(event); }

});

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

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

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