I have been working for some time to 1) detect tab and shift tab
events 2) control the focus on the basis of these events. I have
found that I can do this, but continue to have nagging problems.
One of the main problems at this point lies in cancelling the event.
I have found that the TAB fires the onkeypress in NN, but not in IE.
I can cancel the onkeypress fine in NN. The TAB fires the onkeydown
in IE and can be cancelled in IE. This all works fine. I cancel
events in both cases by
return false;
However, I have one problem. In NN, when focus is on a select object,
onkeypress will not fire when TAB is pressed. Rather, only onkeydown
fires.
I cannot cancel onkeydown in NN. I would use onkeydown routinely, but
have not determined how to cancel it in NN. In IE, it cancels fine.
Can anyone tell me if there is some secret to cancelling onkeydown in
NN? Is this one of those bubble-up deals?
Code details:
BROWSER DETECTION:
function getBrowser() {
var bName = navigator.appNa me;
var bVer = parseInt(naviga tor.appVersion) ;
bType="None";
if (bName == "Netscape" && bVer >= 5) {bType="nn5";}
else if (bName == "Netscape" && bVer >= 4) {bType="nn4";}
else if (bName == "Netscape" && bVer >= 3) {bType= "nn3";}
else if (bName == "Netscape" && bVer == 2) {bType= "nn2";}
else if (bName.indexOf( 'Microsoft') >= 0 && bVer >= 4) {bType=
"ie4";}
else if (bName.indexOf( 'Microsoft') >= 0 && bVer >= 2) {bType=
"ie3";}
return bType;
}
DOCUMENT DECOMPOSITION:
function fixstart(f) {
zmaxv=0;xmaxv=0 ;setstart=0;
docContents = document.getEle mentsByTagName( "*");
for (var i=0; i < docContents.len gth; i++) {
if (docContents[i].type == 'text' ||
docContents[i].type == 'textarea' ||
docContents[i].type == 'radio' ||
docContents[i].type == 'checkbox' ||
docContents[i].type == 'select-one' ||
docContents[i].type == 'select') {zmaxv++;}
}
dCitems=new Array(zmaxv);dC names=new Array(zmaxv);
dCtypes=new Array(zmaxv);dC divs=new Array(zmaxv);
var divhold="null";
divcnt=0
for (var i=0; i < docContents.len gth; i++) {
if (docContents[i].nodeName == "DIV") {
divhold=docCont ents[i].id;divcnt++;
}
if (docContents[i].type == 'text' ||
docContents[i].type == 'textarea' ||
docContents[i].type == 'radio' ||
docContents[i].type == 'checkbox' ||
docContents[i].type == 'select-one' ||
docContents[i].type == 'select') {
dCitems[xmaxv]=i;
dCnames[xmaxv]=docContents[i].name;
dCtypes[xmaxv]=docContents[i].type;
dCdivs[xmaxv]=divhold;
xmaxv++;
}
}
}
GENERAL LOGIC:
The overall process is controlled using:
<BODY onkeypress="ret urn nclkH(event,doc ument.rexform,1 );"
onkeydown="retu rn nclkH(event,doc ument.rexform,2 );return false;"
onkeyup="alert( "onkeyup");retu rn false;">
OBJECT IDENTIFICATION:
onfocus="iam='_ object';" name="_object"
so that each object is self-identified as focus is established.
OVERALL PROCESS:
function nclkH(eventObje ct,myForm,typeB rowser) {
if (setstart) {fixstart(event Object);}
if (bType == "ie3" || bType == "ie4") {prx=0;}
prx=0;
var curpos=findItem (iam);
var spcKey=eventObj ect.keyCode;var shfKey=eventObj ect.shiftKey;va r
ok;
var iType=dCtypes[curpos];
if (prx) {
alert("typeBrow ser:"+typeBrows er+",iam:"+iam) ; }
if ((typeBrowser == 1 && iType != "select" &&
iType != "select-one" &&
(bType == "nn5" || bType == "nn4" ||
bType == "nn3" || bType == "nn2")) ||
(typeBrowser == 2 &&
(bType == "ie3" || bType == "ie4" ||
iType == "select" || iType == "select-one"))) {
if (prx) {
alert("iam:"+ia m+",curpos:"+cu rpos+",dCnames: "+dCnames[curpos])
}
if (spcKey == 9) {
ok=1;
oldpos=curpos;
for (i=curpos; ok;) {
if ((iType == "select-one" || iType == "select") &&
(bType == "nn5")) {
if (shfKey) {curpos--;curpos--}
else {}
}
else {
if (shfKey) {curpos--}
else {curpos++}
}
if (curpos < 0) {curpos=0;}
if (curpos >= zmaxv) {curpos=zmaxv-1;}
ok=0;
}
if (prx) {
alert("curpos:" +curpos+",dCnam es:"+dCnames[curpos])
}
if (divcnt > 0) {
if (dCdivs[curpos] != "null") {sDv(dCdivs[curpos])}
showVis()
}
docContents[dCitems[curpos]].focus();
eventObject.ret urnValue=false
eventObject.can celBubble=true
return false;
}
else {
if (dCtypes[curpos] == 'text' || dCtypes[curpos] == 'textarea')
{
var fx=docContents[dCitems[curpos]].value;
var sx=docContents[dCitems[curpos]].size;
var cnx=findItem(nx itm);
fixBlank(docCon tents[dCitems[curpos]])
if (fx.length >= sx) {
}
}
}
}
}
DETERMINING THE CURRENT LOCATION:
When I detect a TAB, I first find where I am:
function findItem(itmnam e) {
var radiopos=-1;var curpos=-1;var ok=1;
var nmarr=itmname.s plit(/\W/);var cntup=0;
if (nmarr[1] != undefined) {cntup=1;}
for (var i=0; i < zmaxv && ok; i++) {
if (nmarr[0] == dCnames[i]) {
curpos=i;
if (cntup) {radiopos++}
}
if ((curpos > 0 && cntup && radiopos == nmarr[1]) ||
(curpos > 0 && !cntup)) {ok=0}
}
return curpos;
}
function showiam(val) {
//alert("Location - iam:"+iam);
}
function showall() {
for (i=0; i < zmaxv; i++) {
alert("dCitems: "+dCitems[i]+",dCnames:"+dC names[i]+",dCtypes:"+dC types[i]);
}
}
events 2) control the focus on the basis of these events. I have
found that I can do this, but continue to have nagging problems.
One of the main problems at this point lies in cancelling the event.
I have found that the TAB fires the onkeypress in NN, but not in IE.
I can cancel the onkeypress fine in NN. The TAB fires the onkeydown
in IE and can be cancelled in IE. This all works fine. I cancel
events in both cases by
return false;
However, I have one problem. In NN, when focus is on a select object,
onkeypress will not fire when TAB is pressed. Rather, only onkeydown
fires.
I cannot cancel onkeydown in NN. I would use onkeydown routinely, but
have not determined how to cancel it in NN. In IE, it cancels fine.
Can anyone tell me if there is some secret to cancelling onkeydown in
NN? Is this one of those bubble-up deals?
Code details:
BROWSER DETECTION:
function getBrowser() {
var bName = navigator.appNa me;
var bVer = parseInt(naviga tor.appVersion) ;
bType="None";
if (bName == "Netscape" && bVer >= 5) {bType="nn5";}
else if (bName == "Netscape" && bVer >= 4) {bType="nn4";}
else if (bName == "Netscape" && bVer >= 3) {bType= "nn3";}
else if (bName == "Netscape" && bVer == 2) {bType= "nn2";}
else if (bName.indexOf( 'Microsoft') >= 0 && bVer >= 4) {bType=
"ie4";}
else if (bName.indexOf( 'Microsoft') >= 0 && bVer >= 2) {bType=
"ie3";}
return bType;
}
DOCUMENT DECOMPOSITION:
function fixstart(f) {
zmaxv=0;xmaxv=0 ;setstart=0;
docContents = document.getEle mentsByTagName( "*");
for (var i=0; i < docContents.len gth; i++) {
if (docContents[i].type == 'text' ||
docContents[i].type == 'textarea' ||
docContents[i].type == 'radio' ||
docContents[i].type == 'checkbox' ||
docContents[i].type == 'select-one' ||
docContents[i].type == 'select') {zmaxv++;}
}
dCitems=new Array(zmaxv);dC names=new Array(zmaxv);
dCtypes=new Array(zmaxv);dC divs=new Array(zmaxv);
var divhold="null";
divcnt=0
for (var i=0; i < docContents.len gth; i++) {
if (docContents[i].nodeName == "DIV") {
divhold=docCont ents[i].id;divcnt++;
}
if (docContents[i].type == 'text' ||
docContents[i].type == 'textarea' ||
docContents[i].type == 'radio' ||
docContents[i].type == 'checkbox' ||
docContents[i].type == 'select-one' ||
docContents[i].type == 'select') {
dCitems[xmaxv]=i;
dCnames[xmaxv]=docContents[i].name;
dCtypes[xmaxv]=docContents[i].type;
dCdivs[xmaxv]=divhold;
xmaxv++;
}
}
}
GENERAL LOGIC:
The overall process is controlled using:
<BODY onkeypress="ret urn nclkH(event,doc ument.rexform,1 );"
onkeydown="retu rn nclkH(event,doc ument.rexform,2 );return false;"
onkeyup="alert( "onkeyup");retu rn false;">
OBJECT IDENTIFICATION:
onfocus="iam='_ object';" name="_object"
so that each object is self-identified as focus is established.
OVERALL PROCESS:
function nclkH(eventObje ct,myForm,typeB rowser) {
if (setstart) {fixstart(event Object);}
if (bType == "ie3" || bType == "ie4") {prx=0;}
prx=0;
var curpos=findItem (iam);
var spcKey=eventObj ect.keyCode;var shfKey=eventObj ect.shiftKey;va r
ok;
var iType=dCtypes[curpos];
if (prx) {
alert("typeBrow ser:"+typeBrows er+",iam:"+iam) ; }
if ((typeBrowser == 1 && iType != "select" &&
iType != "select-one" &&
(bType == "nn5" || bType == "nn4" ||
bType == "nn3" || bType == "nn2")) ||
(typeBrowser == 2 &&
(bType == "ie3" || bType == "ie4" ||
iType == "select" || iType == "select-one"))) {
if (prx) {
alert("iam:"+ia m+",curpos:"+cu rpos+",dCnames: "+dCnames[curpos])
}
if (spcKey == 9) {
ok=1;
oldpos=curpos;
for (i=curpos; ok;) {
if ((iType == "select-one" || iType == "select") &&
(bType == "nn5")) {
if (shfKey) {curpos--;curpos--}
else {}
}
else {
if (shfKey) {curpos--}
else {curpos++}
}
if (curpos < 0) {curpos=0;}
if (curpos >= zmaxv) {curpos=zmaxv-1;}
ok=0;
}
if (prx) {
alert("curpos:" +curpos+",dCnam es:"+dCnames[curpos])
}
if (divcnt > 0) {
if (dCdivs[curpos] != "null") {sDv(dCdivs[curpos])}
showVis()
}
docContents[dCitems[curpos]].focus();
eventObject.ret urnValue=false
eventObject.can celBubble=true
return false;
}
else {
if (dCtypes[curpos] == 'text' || dCtypes[curpos] == 'textarea')
{
var fx=docContents[dCitems[curpos]].value;
var sx=docContents[dCitems[curpos]].size;
var cnx=findItem(nx itm);
fixBlank(docCon tents[dCitems[curpos]])
if (fx.length >= sx) {
}
}
}
}
}
DETERMINING THE CURRENT LOCATION:
When I detect a TAB, I first find where I am:
function findItem(itmnam e) {
var radiopos=-1;var curpos=-1;var ok=1;
var nmarr=itmname.s plit(/\W/);var cntup=0;
if (nmarr[1] != undefined) {cntup=1;}
for (var i=0; i < zmaxv && ok; i++) {
if (nmarr[0] == dCnames[i]) {
curpos=i;
if (cntup) {radiopos++}
}
if ((curpos > 0 && cntup && radiopos == nmarr[1]) ||
(curpos > 0 && !cntup)) {ok=0}
}
return curpos;
}
function showiam(val) {
//alert("Location - iam:"+iam);
}
function showall() {
for (i=0; i < zmaxv; i++) {
alert("dCitems: "+dCitems[i]+",dCnames:"+dC names[i]+",dCtypes:"+dC types[i]);
}
}
Comment