Telephone field?

[osquiabro]

Telephone field what is it? or how does it work?

i need a similar option

https://www.jqueryscript.net/demo/jQuery-Input-Mask-Phone-Numbers/

 but  NT Telephone field option does nothing

[bshields]

This is his code:

// ==================================================
//
// jquery-input-mask-phone-number v1.0
//
// Licensed (The MIT License)
//
// Copyright © Raja Rama Mohan Thavalam <rajaram.tavalam@gmail.com>
//
// ==================================================
;
(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.clipboardData.getData('Text');
                if (!$.isNumeric(inputValue)) {
                    return false;
                } else {
                    inputValue = String(inputValue.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));
                    $(this).val(inputValue);
                    $(this).val('');
                    inputValue = inputValue.substring(0, 12);
                    $(this).val(inputValue);
                }
            });
            $(this).on('keypress', function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    return false;
                }
                var curchr = this.value.length;
                var curval = $(this).val();
                if (curchr == 3) {
                    $(this).val(curval + "-");
                } else if (curchr == 7) {
                    $(this).val(curval + "-");
                }
                $(this).attr('maxlength', '12');
            });

        } else if (params.format === '(xxx) xxx-xxxx') {
            $(this).on('keypress', function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    return false;
                }
                var curchr = this.value.length;
                var curval = $(this).val();
                if (curchr == 3) {
                    $(this).val('(' + curval + ')' + " ");
                } else if (curchr == 9) {
                    $(this).val(curval + "-");
                }
                $(this).attr('maxlength', '14');
            });
            $(this).bind('paste', function (e) {
                e.preventDefault();
                var inputValue = e.originalEvent.clipboardData.getData('Text');
                if (!$.isNumeric(inputValue)) {
                    return false;
                } else {
                    inputValue = String(inputValue.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3"));
                    $(this).val(inputValue);
                    $(this).val('');
                    inputValue = inputValue.substring(0, 14);
                    $(this).val(inputValue);
                }
            });

        }
    }
}(jQuery));

He is doing formatting on the client side in JQuery.

He is registering this function on the page with this:



            $(document).ready(function () {
                $('#yourphone').usPhoneFormat({
                    format: '(xxx) xxx-xxxx',
                });
            });


You could do a similar thing.

In NT rather than a function you'd probably bind this formatting to a class. Meaning, any fields where you want this formatting, add your "format into phone number" class to the html input and add your jquery that looks for this class and applies the formatting.

[Bruce]

>> Telephone field what is it? or how does it work?

it's an HTML input type. See
https://www.w3schools.com/tags/att_input_type_tel.asp

I see it now take a "pattern" option - which is something you can add, and something I'll play with a bit to see how it functions, with a view to adding it to the templates.

Aside: In my experience telephone patterns are a bad idea - feel free to test yours with my phone number
+27 87 828 0123

I've come across a lot of sites that reject this because they impose local phone number formatting on non-local phone numbers.
you might find this blog post (and related posts) insightful.
https://blog.insycle.com/phone-number-formatting-crm#the-anatomy-of-phone-number-formats

Cheers
Bruce

[osquiabro]

thanks bshields, Bruce i think that this post apply for Feature Requests

[osquiabro]

this tool is very useful

https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html