jQuery Enable Tab Key Input

Question

I'm using the following jQuery to format phone numbers in an input field and it works great! Except for one thing, it disables all input keys except numeric, which makes sense for phone numbers.

The problem is the Tab key is also disabled, which I love using when filling out forms to go to the next field. How can I enable the Tab key input?

(function ($) {
    $.fn.usPhoneFormat = function (options) {
        var params = $.extend({
            format: 'xxx-xxx-xxxx',
            international: false,

        }, options);

        if (params.format === 'xxx-xxx-xxxx') {
            $(this).bind('paste', function (e) {

                e.preventDefault();
                var inputValue = e.originalEvent && e.originalEvent.clipboardData.getData('Text');
                inputValue = inputValue.replace(/\D/g, '');
                if (!$.isNumeric(inputValue)) {
                    return false;
                } else {
                    if (inputValue.length > 9) {
                        inputValue = String(inputValue.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));
                    } else {
                        inputValue = String(inputValue.replace(/(\d{3})(?=\d)/g, '$1-'));
                    }
                    $(this).val(inputValue);
                    $(this).val('');
                    inputValue = inputValue.substring(0, 12);
                    $(this).val(inputValue);
                }
            });
            $(this).on('keydown touchend', function (e) {

                e = e || window.event;
                var key = e.which || e.keyCode; // keyCode detection
                var ctrl = e.ctrlKey ? e.ctrlKey : ((key === 17) ? true : false); // ctrl detection
                if (key == 86 && ctrl) { // Ctrl + V Pressed !

                } else if (key == 67 && ctrl) { // Ctrl + C Pressed !

                } else if (key == 88 && ctrl) { // Ctrl + x Pressed !

                } else if (key == 65 && ctrl) { // Ctrl + a Pressed !
                    $(this).trigger("paste");
                } else if (e.which != 8 && e.which != 0 && !(e.keyCode >= 96 && e.keyCode <= 105) && !(e.keyCode >= 48 && e.keyCode <= 57)) {
                    return false;
                }
                var curchr = this.value.length;
                var curval = $(this).val();
                if (curchr == 3 && e.which != 8 && e.which != 0) {
                    $(this).val(curval + "-");
                } else if (curchr == 7 && e.which != 8 && e.which != 0) {
                    $(this).val(curval + "-");
                }
                $(this).attr('maxlength', '12');
            });

        } else if (params.format === '(xxx) xxx-xxxx') {
            $(this).on('keydown touchend', function (e) {

                e = e || window.event;
                var key = e.which || e.keyCode; // keyCode detection
                var ctrl = e.ctrlKey ? e.ctrlKey : ((key === 17) ? true : false); // ctrl detection
                if (key == 86 && ctrl) { // Ctrl + V Pressed !

                } else if (key == 67 && ctrl) { // Ctrl + C Pressed !

                } else if (key == 88 && ctrl) { //Ctrl + x Pressed

                } else if (key == 65 && ctrl) { //Ctrl + a Pressed !
                    $(this).trigger("paste");
                } else if (e.which != 8 && e.which != 0 && !(e.keyCode >= 96 && e.keyCode <= 105) && !(e.keyCode >= 48 && e.keyCode <= 57)) {
                    return false;
                }
                var curchr = this.value.length;
                var curval = $(this).val();
                if (curchr == 3 && e.which != 8 && e.which != 0) {
                    $(this).val('(' + curval + ')' + " ");
                } else if (curchr == 9 && e.which != 8 && e.which != 0) {
                    $(this).val(curval + "-");
                }
                $(this).attr('maxlength', '14');

            });
            $(this).bind('paste', function (e) {

                e.preventDefault();
                var inputValue = e.originalEvent && e.originalEvent.clipboardData.getData('Text');
                inputValue = inputValue.replace(/\D/g, '');

                if (!$.isNumeric(inputValue)) {
                    return false;
                } else {

                    if (inputValue.length > 9) {
                        inputValue = String(inputValue.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3"));
                    } else if (inputValue.length > 6) {
                        inputValue = String(inputValue.replace(/(\d{3})(\d{3})(?=\d)/g, '($1) $2-'));
                    } else if (inputValue.length > 3) {
                        inputValue = String(inputValue.replace(/(\d{3})(?=\d)/g, '($1) '));
                    }

                    $(this).val(inputValue);
                    $(this).val('');
                    inputValue = inputValue.substring(0, 14);
                    $(this).val(inputValue);
                }
            });

        }
        
    }
}(jQuery));

Answer 1

Change your else if with return false to exclude the tab key. This will need to be changed in all of the else if's that return false by using: e.keyCode != 9

else if (e.keyCode != 9 && e.which != 8 && e.which != 0 && !(e.keyCode >= 96 && e.keyCode <= 105) && !(e.keyCode >= 48 && e.keyCode <= 57))