2009年3月9日 星期一

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

問題說明:
攔截Enter鍵,模擬Click功能的Java Script 程式,經過統整後發展成:
在資料輸入頁面,可以自動偵測Enter鍵,處理到下筆資料區或送出資料的功能。

請參閱下面程式碼:

function KeyDownProcess() {
var kv = 0;
var rv = false;
var isTextarea = false;
var currentId=null;//目前元件
if (document.all && typeof (document.all) == "object") {
kv = event.keyCode;
isTextarea = (event.srcElement.tagName == "TEXTAREA");
currentId = event.srcElement.id;
}
else {
kv = evt.keyCode;
isTextarea = (evt.target == "TEXTAREA");
currentId=evt.id;
}
switch (kv) {
case 13:
if (currentId.length == 0)
return false;
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;
var beginNext = false; //開始比對是否為輸入元件
var nextInput = null; //下一個輸入元件
for (ii = 0; ii < cts.length; ii++) {
if (beginNext == true && (cts[ii].type == "text") && cts[ii].readOnly == false) {
nextInput = cts[ii]; //找到下一個文字輸入元件
break;
}
if (cts[ii].id == currentId) {
beginNext = true;
}

if (cts[ii].type == "submit" && beginNext == true) {
queryBu = cts[ii]; //找到submit元件
break;
}
}
if (null != queryBu) {
setTimeout("doClick('" + queryBu.id + "');", 100);
rv = false;
}
else if (null != nextInput) {
nextInput.focus();
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', false, false);
o.dispatchEvent(e);
}
}

*以上程式碼,適用於使用Input Buttom Submit type的資料後送模式;如果使用Input Button Image type,則需要修改判斷的type 為image。

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

沒有留言: