Daeva
In Runtime
- Messages
- 407
Just thought i'd share this.
Okay, I was playing around in javascript for a project i'm working on and I came upon a problem, which I have come accross before. Here is the problem:
4 form fields, each having a maxlength of 3 and a minimum length of 1.
The fields are IP address octets.
192.168.0.1 for example.
each of the 4 form fields holds 1 octet(up to 3 digits).
But it's a pain to have to type in 1, 2, or 3 digits and then hit the tab key to go to the next field, or to use the mouse to get to the next field. Sooo, I used a little trial an error and some javascript to make the form automatically send you to the next field. Here is the full html page i used to test it.
The javascript works in I.E 6+, Firefox 1.5+, and Opera 9+ The only problem with opera is I can't get the . to be removed from the text field. For example, lets say you enter 124 in the first box and 12 in the second box. the second box will still contain a period in Opera(still working on fixing that). Otherwise, it's a pretty stable and usefull script. You can customize it to "auto-tab" to the next form field using any character.
Okay, I was playing around in javascript for a project i'm working on and I came upon a problem, which I have come accross before. Here is the problem:
4 form fields, each having a maxlength of 3 and a minimum length of 1.
The fields are IP address octets.
192.168.0.1 for example.
each of the 4 form fields holds 1 octet(up to 3 digits).
But it's a pain to have to type in 1, 2, or 3 digits and then hit the tab key to go to the next field, or to use the mouse to get to the next field. Sooo, I used a little trial an error and some javascript to make the form automatically send you to the next field. Here is the full html page i used to test it.
Code:
<?xml version="1.0" charset="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" dir="ltr" lang="en-us" xml:lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;" />
<title>Test form elements</title>
<script type="text/javascript">
<!--
function nextElement(obj, e) {
var replaceText = new String("");
document.getElementById("outputSpan").innerHTML = "You are in " + obj.id.toString() + ": " + e.keyCode + "Index number " + getIndex(obj); // used for debugging
if (navigator.appName == "Opera" && navigator.appVersion >= "9") {
if (e.keyCode == 78 || e.keyCode == 46) {
replaceText = obj.text;
obj.text = replaceText.replace("."," ");
document.forms[0].elements[getIndex(obj)+1].focus();
} else {
} // end else
} else {
if (e.keyCode == 110 || e.keyCode == 190) { //the . symbol has 2 different ways of being pressed on standard keyboards.
replaceText = obj.value;
obj.value = replaceText.replace("\.","");
document.forms[0].elements[getIndex(obj)+1].focus(); // set focus to next element
} // end if
} // end if
} // end function nextElement
function getIndex(input) { // get index searches your form for a match
/* NOTE
Javascript's API doesn't provide a method(that is supported accross multiple platforms) to return the index of the element we are talking about. So this method takes a brute force approach to finding the element's index, which we will use to skip to the next element.
*/
var index = new Number(0);
for(index = 0; index < document.forms[0].length; index++) { // while we still have form elements
if (document.forms[0].elements[index] == input) {
return index;
} // end if
} // end for loop
} // end function getIndex
//-->
</script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="">
<div id="mainDiv">
<table id="mainTable" name="mainTable">
<thead>
<tr>
<td colspan="2" valign="bottom" align="center" style="text-align: center;">
Testing auto-tab form elements
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1" valign="top" align="left">
<label for="field1">Fields</label>
</td>
<td colspan="1" valign="top" align="left">
<input id="field1" name="field1" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
<input id="field2" name="field2" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
<input id="field3" name="field3" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
<input id="field4" name="field4" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
</td>
</tr>
<tr>
<td colspan="2" valign="top" align="left">
<span id="outputSpan"></span>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
