Help with phone # script

[AaronCampbell]

Here is the script:<script language="javascript">
function getKey(e) {
if (e.keyCode) return String.fromCharCode(e.keyCode);
if (e.which) return String.fromCharCode(e.which);
}
function limitEntry(e,field) {
var el = 0, f = field.form, keyChar = getKey(e);
if (/\D/.test(keyChar)) return false; //digits only
while (f.elements[el]) {
if (f.elements[el++] == field) break; //find current field
}
if ((field.value.length + 1 == field.maxLength) && f.elements[el]) {
f.elements[el-1].value += keyChar;
f.elements[el].focus();
return false;
}
return true;
}
</script>Here is a form you might use it with:<input name="phone" id="phone" type="text" class="Form" onkeypress="return limitEntry(event,this)" maxlength="3" size="3" />-
<input name="phone2" id="phone2" type="text" class="Form" onkeypress="return limitEntry(event,this)" maxlength="3" size="3" />-
<input name="phone3" id="phone3" type="text" class="Form" onkeypress="return limitEntry(event,this)" maxlength="4" size="4" /><br />
<input name="fax" id="fax" type="text" class="Form" onkeypress="return limitEntry(event,this)" maxlength="10" size="10" />
Ok, basically, the script allows only digits to be entered into the box, and when it reaches it's max, it focus' you on the next element in the form. The problem is, for the LAST digit in any given box, it adds it to the end of the value, rather than returning true. This means that if you have 619555124 and you move your cursor between the 2 & the 4 to enter a 3, you get 6195551243 rather than 6195551234...and this can be annoying.

The problem is, if you simply return true, you can't then focus on the next element. Any ideas?

[AaronCampbell]

By the way, I tried changing the relevant code to:// f.elements[el-1].value += keyChar;
setTimeout(f.elements[el].focus(), 2000);
return true;
But that doesn't work, it enters the last digit into the next form element (no matter what the delay).

[maxadim]

The problem is, for the LAST digit in any given box, it adds it to the end of the value, rather than returning true. This means that if you have 619555124 and you move your cursor between the 2 & the 4 to enter a 3, you get 6195551243 rather than 6195551234 I think you can fix this by changing onKeyPress to onKeyUp. Couldn't swear to it though

[AaronCampbell]

This is another autotab function that does NOT have the same problem. However, I don't understand it all that well. Can anyone here break it down, and tell me what it does step by step?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();
}

function containsElement(arr, ele) {
var found = false, index = 0;
while(!found && index < arr.length)
if(arr[index] == ele)
found = true;
else
index++;
return found;
}

function getIndex(input) {
var index = -1, i = 0, found = false;
while (i < input.form.length && index == -1)
if (input.form[i] == input)index = i;
else i++;
return index;
}
return true;
}
Used like this:<input type="text" name="npa" maxlength="3" size="3" class="DSL_input" onKeyUp="return autoTab(this,3,event);">-
<input type="text" name="nnx" maxlength="3" size="3" class="DSL_input" onKeyUp="return autoTab(this,3,event);">-
<input type="text" name="line" maxlength="4" size="4" class="DSL_input">
maxadim - I'm not in the office right now, but I'll try this as soon as I get there, since it seems that the code above (which works), uses onkeyup

[maxadim]

This should work:

<FORM action="" method=POST name="myForm">
<p>Phone:
<TEXTAREA name="myTextBox" cols=40 rows=1 id="textarea" onkeypress="return maskKeyPress(event)"></TEXTAREA>
<BR>
<font size="1"> </FONT>
<script language="JavaScript">
<!--
var supportsKeys = false
function tick() {
calcCharLeft(document.forms[0])
if (!supportsKeys) timerID = setTimeout("tick()",1000)
}

function calcCharLeft(sig) {
clipped = false
maxLength = 13
if (document.myForm.myTextBox.value.length > maxLength)
{
document.myForm.myTextBox.value = document.myForm.myTextBox.value.substring(0,maxLength)
charleft = 0
clipped = true
}
else
{
charleft = maxLength - document.myForm.myTextBox.value.length
}
return clipped
}

tick();
//-->
</script>
<script language="javascript" type="text/javascript">
function maskKeyPress(objEvent)
{
var iKeyCode;
iKeyCode = objEvent.keyCode;
if(iKeyCode>=48 && iKeyCode<=57) return true;
return false;
}
</script>
</p>
</FORM>

It should be fairly self explanatory, if not ask and I'll take you throught it.

[AaronCampbell]

actually, that one was a bit hard for me to follow...I wasn't exactly sure why you were using a timeout in there. Anyway, I made a modification to the second one I posted (to allow only numbers), and now it works great. There is one part that I don't full understand. Could someone tell me what the red stuff means?var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function limitEntry(e, input) {
var keyChar = getKey(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];
var len = input.maxLength;
if(input.value.length+1 >= len && !containsElement(filter,keyCode)) {
input.value = input.value.slice(0, len);
input.form[(getIndex(input)+1) % input.form.length].focus();
}
if (/[^\d|\t]/.test(keyChar)) return false; //digits only

function containsElement(arr, ele) {
var found = false, index = 0;
while(!found && index < arr.length)
if(arr[index] == ele)
found = true;
else
index++;
return found;
}

function getIndex(input) {
var index = -1, i = 0, found = false;
while (i < input.form.length && index == -1)
if (input.form[i] == input)index = i;
else i++;
return index;
}
return true;
}Here are those keyCodes:
0 = NUL (null)
8 = BS (backspace)
9 = TAB (horizontal tab)
16 = DLE (data link escape)
17 = DC1 (device control 1)
18 = DC2 (device control 2)
37 = %
38 = &
39 = '
40 = (
46 = .