Magento2 – Change Telephone Field Type in Checkout

checkoutknockoutjsmagento2

I want to change the input for the telephone field in the checkout from text to number.

I looked into it 2 years ago and created this topic on the Magento community forum: https://community.magento.com/t5/Magento-2-x-Programming/Change-telephone-input-field-to-number/td-p/93660 There were some answers there but none worked. Now two years later another of our customers asks for this but I still can't seem to find a fix. Does anyone have a clue?

Thanks in advance

Best Answer

You can try this module

app/code/Sanne/Js/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Sanne_Js" setup_version="1.0.0">
        <sequence> <module name="Magento_Checkout" /></sequence>
    </module>
</config>

app/code/Sanne/Js/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Sanne_Js',
    __DIR__
);

app/code/Sanne/Js/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="phonejs" template="Sanne_Js::js.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/Sanne/Js/view/frontend/templates/js.phtml

<?php

<script type="text/x-magento-init">
{
"*": {
            "Sanne_Js/js/phonevalidation":
                {"phoneinput":"input[name=telephone]"}
    }
}
</script>

app/code/Sanne/Js/view/frontend/web/js/phonevalidation.js

 define([
    "jquery",
    "jquery/ui"
], function($) {
    "use strict";


    //creating jquery widget checking phone numbers to remove character, allowed only numbers
    $.widget('phonevalidation.js', {
        _create: function() {
            var widget = this;
            var templateoptions = widget.options;
            $('body').on('input', templateoptions.phoneinput, function() {
                var number = $(this).val().replace(/[^\d]/g, '');
                $(this).val(number)
            });

        }

    });

    return $.phonevalidation.js;
});

app/code/Sanne/Js/view/frontend/web/requirejs-config.js

var config = {
    map: {
        '*': {
            phonevalidationjs:      'Sanne_Js/js/phonevalidation'
        }
    }
};

app/code/Sanne/Js/view/frontend/layout/customer_address_form.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
             <block class="Magento\Framework\View\Element\Template" name="phonejs" template="Sanne_Js::js.phtml" />
        </referenceContainer>
    </body>
</page>