Problem with caret position when modifying a field (HTML+JS)

Question

The original developer programmed the following JavaScript, which is a little amateurish in my opinion, but I don't work much in Javscript, so I can't offer a better solution with the time I have.

The problem I do need to solve is that each time you press any key that sends input to the text field (any <input type="text" class="phone_val"...), the caret moves to the end, cause the code is replacing it.

The purpose of the code is to format the number for use in the database. Allowed patterns are:

          235 - 5555
    (321) 234 - 5555
  1 (321) 234 - 5555
 21 (321) 234 - 5555
012 (321) 234 - 5555

These are the phone number types we use in our customer base. I need to be able to apply these patterns without the caret (text cursor position) moving to the end every time a key is pressed. It's not a problem until the person needs to correct some characters in the middle of the field. I wouldn't mind being able to seriously simplify and shrink the code down as well, with a regular expression.

HTML:

<input type="text" class="phone_val" style="width: 85%; text-align: right;"
       value="<%= CustomerFields("billing_phone") %>" id="billing_phone"
       name="billing_phone" tabindex="10" />

Javascript (jQuery assumed):

$(document).ready(function() {
    $('.phone_val').attr('maxlength', 20);
    $('.phone_val').keyup(function(){
        var startVal, finVal, i;
        startVal = $(this).val().replace(/\D/g,'');
        if (startVal.length <= 7) {
            finVal = "";
            for (i = 0; i < startVal.length; i += 1) {
                if (i === 3) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }
        else if (startVal.length > 7 && startVal.length < 11) {
            finVal = "(";
            for (i = 0; i < startVal.length; i += 1) {
                if (i === 3) {
                    finVal += ") " + startVal.charAt(i);
                }
                else if (i === 6) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }
        else if (startVal.length >= 11) {
            finVal = "";
            stopP = startVal.length < 13 ? startVal.length - 11 : 2;
            for (i = 0; i < startVal.length; i += 1) {
                if (i === stopP) {
                    finVal += startVal.charAt(i) + " (";
                }
                else if (i === (stopP + 4)) {
                    finVal += ") " + startVal.charAt(i);
                }
                else if (i === (stopP + 7)) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }

        if (startVal.length < 4) {
            finVal = finVal.replace(/\D/g,'');
        }
        $(this).val(finVal);
    });
});

I was thinking about having the code wait a couple of seconds after the user stops typing before applying the formatting. — Dexter
– Dexter, Commented Jan 20, 2011 at 15:43

Tim Down · Accepted Answer · 2011-01-20 16:27:42Z

1

This is horrible on many levels. For the user, there are two bad things here: first, changing input as you type is confusing and annoying, and second, moving the caret to the end every time you type a character is just infuriating. While it is possible to write code to move the caret, I'd recommend against it and instead suggest doing the validation in the change or blur events, or waiting for a period of a few seconds of keyboard inactivity as you suggest in your comment.

answered Jan 20, 2011 at 16:27

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dexter Over a year ago

These were my thoughts exactly. I'm against formatting phone numbers and email addresses as it is, but the boss claims it's important to the techs' management. So, I like the idea of waiting a period or doing onBlur, however I've been having difficulty with the regular expressions-- first I have to remove all letters, then I have to replace different numbers of letters with different formats. Removing everything but digits is easy... startVal.replace(/\D/g, ''). But now should I nest .replace() calls? Or is there one regex that will take care of it all?

Dexter · Accepted Answer · 2011-01-20 17:04:25Z

0

Here's what I've got so far:

$('.phone_val').blur(function () {
    var inpVal = $(this).val().replace(/\D/g, ''); //get rid of everything but numbers

    // RegEx for:
    //    xxx (xxx) xxx - xxxx
    //     xx (xxx) xxx - xxxx
    //      x (xxx) xxx - xxxx
    //        (xxx) xxx - xxxx
    inpVal = inpVal.replace(/^(\d{0,3})(\d{3})(\d{3})(\d{4})$/, '$1($2) $3 - $4');

    // RegEx for (needs a separate one because of the parentheses):
    //              xxx - xxxx
    inpVal = inpVal.replace(/^(\d{3})(\d{4})$/, '$1 - $2');

    $(this).val(inpVal);
});

That takes care of 7 digits and 10-13 digits, but I'm not sure what to do with the ones in between. Should I format those as well, so that the user can see their mistakes easily? Or should I leave them alone?

edited Jan 20, 2011 at 17:04

answered Jan 20, 2011 at 16:54

Dexter

2452 gold badges4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Problem with caret position when modifying a field (HTML+JS)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related