JS Jump to Next Text Field
I am going to have four seperate IP boxes to seperate an IP address so I can validate it and reformat it. I would like to have it so that when a user enters in the first 3 digits it jumps to the next text box.
I found an HTML/JS example but I am having trouble implementing it.
Here is the URL of the example: http://www.w3schools.com/js/tryit.asp?filename=tryjs_autonext
********************************
<html>
<head>
<script type="text/javascript">
function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>This script automatically jumps to the next input field when the current field's maxlength has been reached.</p>
<form>
<input size="3" tabindex="1" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>
</html>
*****************************
Now here is my app:
http://htmldb.oracle.com/pls/otn/f?p=4000:1:8798078175119565682::NO:RP::
workspace: epic
user: tester
pword:epic
The page is 28
The problem I am having is that I don't think everything is being properly recognized. If you run the page I have an alert setup to view "elmnt.tabIndex" in IE it is returning 0 and in Firefox it returns -1. It should be returning 1, 2, or 3. Depending on which element I enter data into.
If I run this on HTML V1.6 I get a JS error "Error cannot move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus." That error relates to this line: document.forms[0].elements[next].focus()
Overall here are some values that I have had returned using the alert box:
elmnt = [object] (should this be P28_IP1 ????)
content = whatever value I enter in the box
content.length = 3
elmnt.maxLength = value i have setup in text box, element, maxWidth (3)
next/elmnt.tabIndex = 0 (this should be equal to whatever is defined ie tabindex="2")
document.forms[0].elements.length = 10 (not sure why this is 10)