Search code examples
javascriptjqueryhtmlinputmasking

Phone number masking using jquery - with three input fields

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.

Solution

  • 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