6

Was trying to achieve, an auto dash for this format XXX-XXX-XXXX

Here's what I have so far:

$('.telnumber').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  foo = foo.match(new RegExp('.{1,3}', 'g')).join("-");
  $(this).val(foo);
});

First 2 blocks are fine, but How can I restrict the last block to accept 4 digits?

It's still auto dashing if there are 3 digits so far.

I'm not good at REGEX so any ideas will be appreciated.

xirukitepe
  • 1,575
  • 7
  • 26
  • 54
  • I suggest trying to press e.g. backspace to cancel a mistyped digit before proceeding to destroy UX with this. – Esailija Oct 01 '13 at 09:01
  • Thanks. But it is forcing an auto dash still. – xirukitepe Oct 01 '13 at 09:03
  • Note that with "solutions" like this you can't use the arrow keys to go back and fix an incorrectly typed number. I would consider formatting with hyphens on the blur event, not while typing. – Strille Oct 01 '13 at 09:18

5 Answers5

9

Here I think best solution. Any non digit chars will be ignored and you will not have extra dashes in the end.

$('.telnumber').keyup(function() {
    this.value = this.value
        .match(/\d*/g).join('')
        .match(/(\d{0,3})(\d{0,3})(\d{0,4})/).slice(1).join('-')
        .replace(/-*$/g, '')
    ;
});
redexp
  • 4,765
  • 7
  • 25
  • 37
  • Nice work . one thing is its not allowing to move cursor with left arrow key . Can you please give a solution for it ? – Viku Mar 21 '15 at 08:54
  • save prev value and compare it with current value, if it's the same then just `return;` – redexp Mar 22 '15 at 06:30
4
foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");
Anirudha
  • 32,393
  • 7
  • 68
  • 89
  • Nice job! Only one thing: Put the `.{1,4}$` before the `.{1,3}` and it will have priority over it and work correctly. – Broxzier Oct 01 '13 at 09:08
0

Since you're already using jQuery you might want to check out this jQuery plugin: http://digitalbush.com/projects/masked-input-plugin/

Strille
  • 5,741
  • 2
  • 26
  • 40
0

Simply adding the regex expression as in the first answer just gave me the below result : xxx-xxx-xxx-xxx-xxx...

This continued. :(

Hence, I have found a better and perfectly working solution. Simply, add 'maxlength=12' to ur input element!! Checkout the fiddle link :

http://jsfiddle.net/juspC/218/

<input type="text" class="telnumber" maxlength="12" />

$('.telnumber').keyup(function() {
    foo = $(this).val().split("-").join(""); // remove hyphens

        foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");

        $(this).val(foo);

    });
anusreemn
  • 1,047
  • 1
  • 10
  • 24
  • Nice work . one thing is its not allowing to move cursor with left arrow key . Can you please give a solution for it ? – Viku Mar 21 '15 at 08:55
  • Here the entered value in the input field is replaced with the dashed(-) expression on each keyup and that is why you are not able to move the cursor. I suppose that is the only possible way. However, you can manually place the cursor with mouse-click and edit the value until the maxLength is reached. Meanwhile, pls keep me posted if you find any alternatives.. :) Happy coding.. B-) – anusreemn Mar 23 '15 at 10:14
  • I filtered the key events for backspace and left arrow so that the above wont fire when we click this 2 keys and it works .. – Viku Mar 23 '15 at 13:23
0

Building off of @Anirudha's answer.

I see other users asking about the cursor and I apologize if I am going off topic here.

For those looking for a phone validation function:

placing @Anirudha's regex in an .on('input') instead of a .keyUp() will solve the cursor issue (so you only update the value when something gets changed). You can also slice and limit it to a 10 digit number.

$('.telnumber').on('input', function() {
  var foo = $(this).val().split("-").join("").slice(0,10); // remove hyphens
  foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");
  $(this).val(foo);
});
Justin Reigel
  • 11
  • 6