Menu
I’m trying to control the actions of keypresses within a table of textboxes.
In the following script, I can limit a character set to: +-.0123456789
and delete, backspace, tab and shift-tab, home, end, right and left arrow within the field.
Question:
1. Is it possible to recognize the ‘return’ keypress to move to the next field (like the tab key)?
2. Is it possible to recognize a home or end keypress to move to the furthest left or right column in a row?
3. Is it possible to recognize a up-arrow or down-arrow to move to the next field above or below the current field?
4. Is it possible to recognize a PgUp or PgDn keypress to move to the top or bottom row of a column of fields?
I assume I would need to change the event key code somehow,
but not sure I know what to change to see the desired effects
especially if it need to be different for different browsers.
Or possibly somehow use something like document.getElementById(‘f0’).select()
if, for example, the home key is pressed when in a field other than ‘f0’.
[code]
<html>
<head>
<title>Number only entry in table of fields</title>
<script type=”text/javascript”>
function numberOnly(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var flag = false;
switch (code) {
case 8 : // backspace
case 9 : // tab and shift-tab
code 46: // delete
case 36: case 35: // Home and End
case 37: case 39: // left arrow and right arrow
// the following seem to do nothing ???
case 13: // return
case 38: case 40: // up arrow and down arrow
case 33: case 34: // PgUp and PgDn
//
flag = true; break;
default: flag = false; break;
}
var char = String.fromCharCode(code);
// alert(‘Code: ‘+code+’ Char: ‘+char); // for testing purposes
// if ((code < 48) || (code > 57)) { return false; } // limit to 0…9
// if ((code < 48) || (code > 52)) { return false; } // limit to 0…4
if (‘0123456789-+.’.indexOf(char) >= 0) { flag = true; }
return flag;
}
</script>
</head>
<body>
Field entry:<br>
<input type=”text” id=”f0″ name=”f0″ size=”6″ onkeypress=”return numberOnly(event);” />
<input type=”text” id=”f1″ name=”f1″ size=”6″ onkeypress=”return numberOnly(event);” />
<input type=”text” id=”f2″ name=”f2″ size=”6″ onkeypress=”return numberOnly(event);” /><br>
<input type=”text” id=”f3″ name=”f3″ size=”6″ onkeypress=”return numberOnly(event);” />
<input type=”text” id=”f4″ name=”f4″ size=”6″ onkeypress=”return numberOnly(event);” />
<input type=”text” id=”f5″ name=”f5″ size=”6″ onkeypress=”return numberOnly(event);” /><br>
<input type=”text” id=”f6″ name=”f6″ size=”6″ onkeypress=”return numberOnly(event);” />
<input type=”text” id=”f7″ name=”f7″ size=”6″ onkeypress=”return numberOnly(event);” />
<input type=”text” id=”f8″ name=”f8″ size=”6″ onkeypress=”return numberOnly(event);” /><p>
Allows entry of following in each field:
<p>
+ or – or . or 0123456789 or delete or backspace<br>
tab, shift-tab, right and left arrow, home and end
<p>
Allows, but does not handle correctly:<br>
PgUp and PgDn or Up- and Down-arrow or Return
</body>
</html>