Greetings experts,
The code below allows users to move focus from one input text box to another dynamically without knowing the form field IDs.
For this to work though, maxlength attribute must be given a value.
Problem with this is that it is not reliable because users may not enter entire maxlength.
Is there a way to modify the code below to move focus from one input box to another without knowing the field IDs and without maxlength attribute?
<input type="text" ID="fullname" name="fullname" size="25" maxlenght="30" value="">
Let's say for instance that the maxlength of an input box is 30 and user enters Jane Blo.
That's 9 characters. This is far less than the 30 maxlength.
At this point, user has finished entering data into this box but focus will not jump because maxlength is 30.
We are hoping that there is a way javascript or jquery would "know" that the user has finished entering data into that box.
I know this is not an easy solution.
Many thanks in advance
<script type="text/javascript">
function doNext(el) {
if (el.value.length < el.getAttribute('maxlength')) return;
var f = el.form;
var els = f.elements;
var x, nextEl;
for (var i = 0, len = els.length; i < len; i++) {
x = els[i];
if (el == x && (nextEl = els[i + 1])) {
if (nextEl.focus) nextEl.focus();
}
}
}
</script>
<table>
<tr>
<td>
<input type="text" maxlength="5" value="sammy" onkeyup="doNext(this);">
</td>
<td>
<input type="text">
</td>
</tr>
</table>