5

I want to create Phone field masking using jquery/javascript. I tried few jquery mask plugins. Still wants to find better solution for that. I have three input fields for USA(I must have three input fields).

Area code

Phone field1

Phone field2

My question is, when the user wrongly type in the phone numbers, and then wants to insert a number in the middle, it should work without affecting other inputs.

Example:

If the user enter inputs as

first input field: "abc"

second input field: "def"

third input field: "gh"

Then the user wants to input "x" in the middle of "d" & "e". Then the input should accept the input as abc, dxe, fgh respectively(It should work kind of auto next input field focus).

Please note: Three input fields are necessary.

Thank you.

Som
  • 270
  • 1
  • 13

2 Answers2

0

Try the following code: (I am using id for input and you need to remove the maxlength attribute from the input boxes)

$("#first").on("input",function(e){
    if($("#first").val().length>3){
        $("#first").val($("#first").val().substring(0,3));
    }
});
Ankit
  • 65
  • 1
  • 7
0

try this link

$('#two').val($('#one').val().substring(3,4)+$('#two').val());
$('#one').val($('#one').val().substring(0,3));
$('#two').focus();

Using it on one textbox only. Can I use it on multiple textboxes. maxlength=3 won't work. You need to get the last element to the other text box

Arslan Ali
  • 17,418
  • 8
  • 58
  • 76
BeardAspirant
  • 79
  • 9
  • That helped me a lot. Thank you:) This will move the current input box values to next input box. But the 'cursor' in the current input box moved to end of the current input box even though I inserted a second number (it might be because of copying substring values and pasting that). Any help for this will also be much appreciated. – Som May 25 '15 at 07:22