“Another” because I notice there are a lot of them (here and elsewhere).
Since I rewrote the other JS stuff on our forms, I thought I should rewrite this one too (even though autoTab is totally not DoWhatIMean and should be banned from teh innernets… yet another reason to fill out forms with Javascript off!).
Current one looks pretty old (works fine of course):
This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cyanide_7 |
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function autoTab(input,len, e) {
var keyCode = (isNN) ? e.which : e.keyCode;
var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
if(input.value.length >= len && !containsElement(filter,keyCode)) {
input.value = input.value.slice(0, len);
input.form[(getIndex(input)+1) % input.form.length].focus();
}
etc...
You can see it’s checking for Netscape, and checking for control keys being hit. I figured something simple like autoTab would be a good learning exercise for me.
On just one set of questions, they want autoTab to run, but not on any others.
relevant HTML (HTML4 transitional, inside a form):
<div>
<label for="Postcodenum">Postcode:</label>
<input type="text" name="Postcode" id="Postcodenum" title="postcode cijfers" value="" size="4" maxlength="4">
<label class="access" for="Postcodelet">Postcode letters:</label>
<input type="text" name="Postcode2" id="Postcodelet" value="" size="2" maxlength="2">
</div>
<div>
<label for="Plaats">Plaats:</label>
<input type="text" id="Plaats" name="Plaats" value="">
</div>
The desired behaviour is that after the first postcode input is filled to maxlength (4), the focus moves to the next one, until the maxlength is filled (2), then focus is moved to the next input (Plaats) and further is there no more autoTab.
So I wanted to not only rewrite this, but I wanted it to be very general.
I’m having trouble with the “next” part, as stuff like nextSibling-if-an-input stumbles on the wrapping divs.
While everything works up to the “next” stuff, I’m not sure I did this the right way either:
var inputs = [document.getElementById('Postcodenum'),
document.getElementById('Postcodelet')],
j;
function autoTab() {
var next = this;
/* do {
next = next.nextSibling;
}
while (next.nodeName !=='INPUT');
if (this.value.length === this.maxLength) {
next.focus();
}*/
}
for (j = 0; j < inputs.length; j++) {
inputs[j].onkeyup = autoTab;
}
I think I did the array clumsily… I would have liked to make an array of whatever elements have an id that matches a regex pattern but since right now it’s always only ever 2 inputs, I just directly asked for their id’s. I put them in an array because I wanted to be able to use one var to Do Stuff to (theinput.onkeyup, theinput+thenextinput.focus() etc). There will possibly maybe when-hell-freezes be some input validation added here as well.
I got the do-while loop from an older thread in this forum, and I see what it does and works for what it’s meant for (a string of inputs altogether like you see for creditcard and phonenumbers and birthdates), but obviously can’t deal with my HTML setup with wrapping divs.
My question is, must I do the whole document.forms[“formID”].elements and then loop through all of them (it’s a long form) looking for “this” (whichever postcode input I’m on) and then adding 1 to the index and calling this “next” for next.focus()?? Many of the solutions and examples I see online use tabindex (I’d rather not add that to my HTML), or explicitly state the next input using name or id, and most examples (including what we are using now) have javascript in the HTML.
Thanks,
poes
