2009年2月26日 星期四

Web Application輸入頁面按下Enter鍵時,如何模擬Click功能?續1

問題說明:
當使用者在網頁頁面習慣性按下Enter鍵時,我們在第一篇文章已經說明了,如何模擬滑鼠Click的功能。但是問題來了,如果網頁頁面上包含了TEXTAREA(ASP.NET的TextBox MultiLine)時,當使用者在此元件中輸入資料時,按下了Enter鍵,系統也啟動滑鼠Click的功能,應該會讓使用者嚇一跳;因為此時使用者應該是希望換下一行,而不是將資料送出,所以面對有TEXTAREA輸入元件的網頁時,就必須調整按鍵處理機制的程式碼!

我的做法如下:

//啟動網頁攔截按鍵機制
window.onload =function(){
document.onkeydown=KeyDownProcess;
};

function KeyDownProcess() {
var kv = 0;
var rv = false;
var isTextarea = false;
if (document.all && typeof (document.all) == "object") {
kv = event.keyCode;
isTextarea = (event.srcElement.tagName == "TEXTAREA");
}
else {
kv = evt.keyCode;
isTextarea = (evt.target == "TEXTAREA");
}
switch (kv) {
case 13:
if (isTextarea ==true) {
rv = isTextarea;
}
else {
var cts = document.all && typeof (document.all) == "object" ? document.all.tags("input") : document.getElementsByTagName('input');
var cid = "";
var queryBu = null;
for (ii = 0; ii < cts.length; ii++) {
if (cts[ii].type == "submit" && cts[ii].id.indexOf("loginBU") > -1) {
queryBu = cts[ii];
break;
}
}
if (null != queryBu) {
doClick(queryBu);
rv = false;
}
}
break;
default:
rv = true;
break;
}
return rv;
}
//實做模擬Click的功能
function doClick(o) {
if (document.all && typeof (document.all) == "object") //IE
o.click();
else {
var e = document.createEvent('mouseEvent');
e.initEvent('click', true, true);
o.dispatchEvent(e);
}
}
*以上程式碼,適用於使用Input Buttom Submit type的資料後送模式;如果使用Input Button Image type,則需要修改判斷的type 為image。

後記:
如有任何建議或改善意見,歡迎隨時來函指正或討論。Thanks.

沒有留言: