Entry
How to overcome key event unreliability for form fields inside tables with NN4?
Aug 23rd, 2000 17:00
Martin Honnen,
NN4 is unfortunately unreliable in firing key events when you have
several INPUT TYPE="text" field in a table (or in nested tables). For
instance in the HTML page shown at the end of this entry the onkeypress
doesn't fire for the first and second (or event third) INPUT
TYPE="text" fields. The problem vanishes when you remove the
TABLE/TR/TD tags but that is not a solution in many cases where the
TABLE is needed for page layout. You can however force NN4 to fire the
event reliably by explicitly capturing it. The following captures the
onkeypress at document level and fires the alert if the event target is
an INPUT element:
<HTML>
<HEAD>
<TITLE>
capture key event at document level to handle it reliably
</TITLE>
<SCRIPT>
if (document.layers) {
document.captureEvents(Event.KEYPRESS);
document.onkeypress =
function (evt) {
if (evt.target.constructor == Input)
alert(evt.type);
};
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<TABLE WIDTH="100%">
<TR>
<TD>
field 0
</TD>
<TD>
<INPUT TYPE="text" NAME="field0"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 1
</TD>
<TD>
<INPUT TYPE="text" NAME="field1"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 2
</TD>
<TD>
<INPUT TYPE="text" NAME="field2"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 3
</TD>
<TD>
<INPUT TYPE="text" NAME="field3"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 4
</TD>
<TD>
<INPUT TYPE="text" NAME="field4"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 5
</TD>
<TD>
<INPUT TYPE="text" NAME="field5"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
The HTML event handler attributes are kept for IE and NN6.
If you want different event handlers for different input field you have
to check the event.target:
<HTML>
<HEAD>
<TITLE>
key event handling for NN4 in form fields in tables
</TITLE>
<SCRIPT>
if (document.layers) {
document.captureEvents(Event.KEYPRESS);
document.onkeypress =
function (evt) {
if (evt.target.constructor == Input) {
if (evt.target.name == 'field0')
return evt.which >= '0'.charCodeAt() && evt.which
<= '9'.charCodeAt();
else if (evt.target.name == 'field1')
return evt.which >= 'A'.charCodeAt() && evt.which
<= 'Z'.charCodeAt();
else {
alert(evt.type);
return true;
}
}
else
return true;
};
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<TABLE WIDTH="100%">
<TR>
<TD>
field 0: accepts only digits
</TD>
<TD>
<INPUT TYPE="text" NAME="field0"
ONKEYPRESS="var keyCode = event.which ? event.which :
event.keyCode;
return keyCode >= '0'.charCodeAt() && keyCode
<= '9'.charCodeAt()"
>
</TD>
</TR>
<TR>
<TD>
field 1: accepts only uppercase letters
</TD>
<TD>
<INPUT TYPE="text" NAME="field1"
ONKEYPRESS="var keyCode = event.which ? event.which :
event.keyCode;
return keyCode >= 'A'.charCodeAt() && keyCode
<= 'Z'.charCodeAt()"
>
</TD>
</TR>
<TR>
<TD>
field 2
</TD>
<TD>
<INPUT TYPE="text" NAME="field2"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 3
</TD>
<TD>
<INPUT TYPE="text" NAME="field3"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 4
</TD>
<TD>
<INPUT TYPE="text" NAME="field4"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 5
</TD>
<TD>
<INPUT TYPE="text" NAME="field5"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Below follows an example which doesn't work reliably with NN4:
<HTML>
<HEAD>
<TITLE>
key event handling example which shows NN4 bug
</TITLE>
</HEAD>
<BODY>
<FORM NAME="formName">
<TABLE WIDTH="100%">
<TR>
<TD>
field 0
</TD>
<TD>
<INPUT TYPE="text" NAME="field0"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 1
</TD>
<TD>
<INPUT TYPE="text" NAME="field1"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 2
</TD>
<TD>
<INPUT TYPE="text" NAME="field2"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 3
</TD>
<TD>
<INPUT TYPE="text" NAME="field3"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 4
</TD>
<TD>
<INPUT TYPE="text" NAME="field4"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
<TR>
<TD>
field 5
</TD>
<TD>
<INPUT TYPE="text" NAME="field5"
ONKEYPRESS="alert(event.type)"
>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
