What is the best method to modify the accurate phone number within my script?

Question

What is the best method to modify the accurate phone number within my script?

I need help with a text format script.

HTML CODE:

<label for="primary_phone">Primary Phone Number<span class="star">*</span></label>
<br>
<input type="text" name="primary_phone" id="primary_phone" class="_phone required-input"  value=""  maxlength="10">

CSS CODE:

.invalid{
    border:1px solid red !important;
}
.valid{
    border:1px solid green !important;
}

JS CODE:

function phoneFormat(){
    $( "._phone" ).on('blur change', function() {
        text = $(this).val().replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
        var testt=$(this).val().match(text);

        if($(this).val()=='' || $(this).val().match(text) || $(this).val().length == 0)
        {
            $(this).removeClass('valid').addClass('invalid');
        }
        else{

            $(this).removeClass('invalid').addClass('valid');
        }
        $(this).val(text);
    });
}

 $( "#primary_phone" ).blur(function() {
        phoneFormat();
    });

The script formats the text like this:

1234567890

Which appears as:

(123) 456-7890

The issue arises when trying to edit the phone number, due to maxlength="10"

I want the user to be able to input up to 10 characters. How can I achieve both requirements?

If anything is unclear, I will provide more details in an update. Thank you!

javascript jquery html css

Answer 1

Answer №1

To ensure only numbers are entered in the input box, simply remove any special characters when focusing on it:

  $("#primary_phone").on("click", function() {
   var thisVal = $(this).val();

    var value = thisVal.replace(/[^\/\d]/g,'');
    $(this).val(value);


});

Now, when you click out of the input box, your original formatting function for the number will take effect :)

Check out the working example here: https://jsfiddle.net/reko91/gto0qeyx/2/

Answer 2

To ensure only numbers are entered in the input box, simply remove any special characters when focusing on it:

  $("#primary_phone").on("click", function() {
   var thisVal = $(this).val();

    var value = thisVal.replace(/[^\/\d]/g,'');
    $(this).val(value);


});

Now, when you click out of the input box, your original formatting function for the number will take effect :)

Check out the working example here: https://jsfiddle.net/reko91/gto0qeyx/2/

Answer 3

Answer №2

To enhance the character limit, it's recommended to increase the maxlength attribute to a higher value like 15. You can then link the input field to the keypress event.

Within this event, you have the option to compare the keyCode with a predefined set of acceptable values and prevent the entry of characters that are not included in this list.

Additionally, consider restricting the inclusion of digits when there are already 10 present, except for cases where the user has selected a part of the input containing numbers.

var alwaysAllowed = [32, 40, 41, 45]; // [" ","(",")","-"]

function keyCode(keyCode) {
    if (alwaysAllowed.indexOf(keyCode) !== -1) {
        return "allowed";
    } else if (keyCode >= 48 && keyCode <= 57) {
        // 0 - 9
        return "number";
    } else {
        // any other character
        return false;
    }
}

function countNumbers(text) {
    var counter = 0;
    for (var i = 0; i < text.length; i++) {
        if (parseInt(text[i]) >= 0 && parseInt(text[i]) < 10) {
            counter++;
        }
    }
    return counter;
}

$primaryPhone.on("keypress", function () {
    var keyCodeEvaluation = keyCode(event.keyCode);
    if (keyCodeEvaluation === false) {
        event.preventDefault();
    } else if (keyCodeEvaluation === "number") {
        var value = this.value,
            counter = countNumbers(value.substring(this.selectionStart, this.selectionEnd));
        
        if (counter === 0 && countNumbers(value) > 9) {
            event.preventDefault();
        }
    }

});

This method enables users to modify or input phone numbers while maintaining the specified format.

OF UTMOST IMPORTANCE

You must revamp your phoneFormat() function.

With each execution, an additional event listener is attached. The initial time the input value is modified, it triggers once. Subsequently, it executes twice, thrice, and so forth.

Moreover, it's advisable to store frequently used objects in variables to optimize performance, such as $(this) (repetitively creating the same jQuery object can impact performance).

Here's a functional example that addresses most common scenarios.

Answer 4

To enhance the character limit, it's recommended to increase the maxlength attribute to a higher value like 15. You can then link the input field to the keypress event.

Within this event, you have the option to compare the keyCode with a predefined set of acceptable values and prevent the entry of characters that are not included in this list.

Additionally, consider restricting the inclusion of digits when there are already 10 present, except for cases where the user has selected a part of the input containing numbers.

var alwaysAllowed = [32, 40, 41, 45]; // [" ","(",")","-"]

function keyCode(keyCode) {
    if (alwaysAllowed.indexOf(keyCode) !== -1) {
        return "allowed";
    } else if (keyCode >= 48 && keyCode <= 57) {
        // 0 - 9
        return "number";
    } else {
        // any other character
        return false;
    }
}

function countNumbers(text) {
    var counter = 0;
    for (var i = 0; i < text.length; i++) {
        if (parseInt(text[i]) >= 0 && parseInt(text[i]) < 10) {
            counter++;
        }
    }
    return counter;
}

$primaryPhone.on("keypress", function () {
    var keyCodeEvaluation = keyCode(event.keyCode);
    if (keyCodeEvaluation === false) {
        event.preventDefault();
    } else if (keyCodeEvaluation === "number") {
        var value = this.value,
            counter = countNumbers(value.substring(this.selectionStart, this.selectionEnd));
        
        if (counter === 0 && countNumbers(value) > 9) {
            event.preventDefault();
        }
    }

});

This method enables users to modify or input phone numbers while maintaining the specified format.

OF UTMOST IMPORTANCE

You must revamp your phoneFormat() function.

With each execution, an additional event listener is attached. The initial time the input value is modified, it triggers once. Subsequently, it executes twice, thrice, and so forth.

Moreover, it's advisable to store frequently used objects in variables to optimize performance, such as $(this) (repetitively creating the same jQuery object can impact performance).

Here's a functional example that addresses most common scenarios.

What is the best method to modify the accurate phone number within my script?

Answer №1

Answer №2

Similar questions

Use `$$state: {…}` within the request rather than the data

Tips for fixing ReferenceError: Cookies is undefined

Steer clear of using grey backgrounds for anchors/links in IE 10

Using Javascript to retrieve form data from a separate file

What is the best way to input data into the verified full name box?

The ckeditor vanishes upon refreshing the div element

Issue with getStaticProps not updating fetched values in Next.js production environment

"Implementing a Texture as Material in Three.js: Step-by-Step Guide

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

React Native ScrollView ref issue resolved successfully

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

The excessive use of Selenium Webdriver for loops results in multiple browser windows being opened simultaneously, without allowing sufficient time for the

Controlling a complex IF statement with jQuery

JavaScript image sorting function fails to sort multiple ID elements that match

Loading options dynamically in a dropdown list using KnockoutJS

What is the proper way to justify text alignment in HTML?

What is the best approach to integrating AJAX calls with promises in the Angular framework?

Discover the magic of Material UI's Multiple Select feature for working with arrays

HTML5 for advanced positioning and layering of multiple canvases

Is it possible to achieve a smooth transition to the right using CSS