Phone number format and data entry restriction

Question

I created a form that formats phone numbers, allows only allowable keys to be pressed, and converts a lettered entry into its corresponding phone keypad number. Is there some cleanup or better coding that can be done? There is no business need for international phone numbers as it is a local business.

function pageLoad() {
    $(".PhoneSelection").keypress(function (e) {
        // Only allow number entry
        var regex = new RegExp("^[0-9]+$");
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (!regex.test(key)) {
            // If not a number, is it a letter?
            var regex2 = new RegExp("^[A-Za-z]+$");
            if (regex2.test(key)) {
                // Convert the letter typed to the number on the phone keypad
                $(this).val($(this).val() + letterPos(key));
                return false;
            }
            else { return false; }
        }
    });
    $(".PhoneNum").text(function (i, text) {
        // returns (999) 555-1234 from 9995551234
        return text.replace(/(\d{3})?(\d{3})(\d{4})$/,
            function ($0, $1, $2, $3) {
                var formatted = ""; if ($1) { formatted += "(" + $1 + ") "; } if ($2) { formatted += $2 + "-"; } if ($3) { formatted += $3; } return formatted;
            }
        );
    });
}
function letterPos(val) {
    var alphaMap = { 'ABC': '2', 'DEF': '3', 'GHI': '4', 'JKL': '5', 'MNO': '6', 'PQRS': '7', 'TUV': '8', 'WXYZ': '9' };
    var number = "";
    $.each(alphaMap, function (key, value) {
        if (key.toLowerCase().indexOf(val.toLowerCase()) > -1)
        { number = value; }
    });
    return number;
}

Here is how it is consumed in the view form:

<div class='PhoneNum'>9995551234</div>
<input id="ContactPhone" class="PhoneSelection nextField" type="text" placeholder="Phone" value="9995551234"></input>

Results on display:

(999) 555-1234

Answer 1

Here are some points regarding your code:

• Decide on a style regarding the if-statements, and stick to it. Don't collapse else statements like the } else { return false; }
• Avoid multiple statements on one line, like the var formatted = ...
• When both branches does the same, extract the return outside of it
• You can inline regexp's when they are simple, (see Detect numbers or letters with jquery/javascript)
• Additionaly when using regexp against a single key you don't need to use anchors or multiple match options. Instead of ^[0-9]+$, simply use [0-9]
• When replacing text you can enter the replacement text directly, instead of using a function. And the function you use is somewhat complicated
• Edit: Switched to a simpler letterToNumber() using the lowercase character code (with the code of a subtracted) to index into a numbered variant of the alphabet.

In this jsfiddle I've corrected for my comments:

$(".PhoneSelection").keypress(function (e) {
    // Only allow number entry
    var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);

    if (!/[0-9]/.test(key)) {
        // If not a number, is it a letter?
        if (/[A-za-z]/.test(key)) {
            // Convert the letter typed to the number on the phone keypad
            $(this).val($(this).val() + letterToNumber(key));
        }
        return false;
    }
});

$(".PhoneNum").text(function (i, text) {
    // returns (999) 555-1234 from 9995551234
    return text.replace(/(\d{3})?(\d{3})(\d{4})$/, "($1) $2-$3")
        .replace(/\(\) /, "");
});

function letterToNumber(val) {
   charIndex = val.toLowerCase().charCodeAt(0) - 97;
   return "22233344455566677778889999"[charIndex];
}

However there are still some comments to be made:

• To remove illegal characters, i.e. non-letters, and transforming letters to numbers, whilst you are typing is frowned upon in some camps. It would be better to present a normalised number next to the input field, or after it has been submitted
• The transformation of the input also removes the visual feedback of whether the user has entered the correct telephone number
• Your code as it stands does not connect the input field and the output field, which might be by design, but it threw me of whilst testing it for a while
• You are bypassing backspacing and/or movement of cursor. As an example start entering a number using letters, i.e. xxjjjmmmm, and then you realise that you forgot the first x, so you move the cursor over there and enter it x. Now the code will add that at the end, bummer...

Edit: In original research I found Code golf: Letters in phone numbers and How to convert an alphanumeric phone number to digits), where the shortest, not very readable version of alternateLetterToNumber() is (with addition of lowercasing the character):

function alternateLetterToNumber(y) {
    y = y.toLowerCase().charCodeAt(0) - 91;
    return y > 27 ? 9 : y > 24 ? 8 : y > 20 ? 7 : ~~ (y / 3);
}