2009年2月25日 星期三

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

問題說明:
在網頁上如果包含資料輸入元件和『送出』的按鈕時,當使用者輸入完資料後,會習慣性的按下Enter鍵,想將資料送出存檔,而一般網頁基本設定是需要按下『送出』這個按鈕,才開始檢驗資料或後送資料;因此,如果想讓使用者按下Enter鍵就可以達到『送出』的功能,需要透過Java Script達成來模擬object Click的功能。
如何達到上面的需求呢?個人試以登入頁面為例,將相關的Java Script程式碼說明如下:

有關登入頁面的元件部署和程式不在這裡說明,一般說來登入頁面應該會有一顆按鈕是執行資料後送的功能,這個元件的ID就假設為:loginBU。
假設上面的條件式成立的,下面的程式碼就可以完成:使用者按下Enter鍵時,自動模擬 loginBU Click的功能:

//啟動網頁攔截按鍵機制
document.onkeydown = KeyDownProcess;

//使用者如果按下Enter鍵時,模擬Click功能
function KeyDownProcess(){
var kv = 0;
if (document.all&& typeof (document.all) == "object") //IE
kv = event.keyCode;
else
kv = evt.keyCode;
if (kv == 13) {
doClick('logonBU');
return false;
}
}

//實做模擬Click的功能
function doClick(linkId) {
var o = document.getElementById(linkId);
if (document.all && typeof (document.all) == "object") //IE
o.click();
else {
var e = document.createEvent('mouseEvent');
e.initEvent('click', false, false);
o.dispatchEvent(e);
}
}

在網頁頁面的JavaScrip程式區,加入上面的程式碼後,當使用者輸入資料後,習慣性按下Enter鍵時,就會執行和按下loginBU Click相同的事件功能。
*當輸入的資料項複雜時,就必須改寫上面的程式碼,才能正常運作。
*更複雜的資料輸入頁面的處理原則,留待下篇文章說明與討論。

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

沒有留言: