0

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

0

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>
  • This does prevent the telephone field from having letters but I need the input type to change so that if people enter their telephone number on mobile they get the number keyboard. I actually just found a solution and will post it under this question now. – Sanne Jan 16 at 8:55
  • Glad you found a solution. – Ylgen Guxholli Jan 16 at 9:11
0

I found that the best way to change the input type is to add a different template to the LayoutProcessor and change the input type in there.

 protected function updateElementTmpls(&$jsLayoutResult)
{
    $shippingAddress = &$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
    $billingAddress = &$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['billing-address']['children']['form-fields']['children'];

    $inputPathPhone = 'YourCompany_YourModule/ui/form/element/phone-overwrite;


    $shippingAddress['telephone']['config']['elementTmpl'] = $inputPathPhone;
    $billingAddress['telephone']['config']['elementTmpl'] = $inputPathPhone;

 }

phone-overwrite.phtml

<input class="input-text" type="number" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    css: {focused: value() != '' && value() != ' '},
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }
"/>

I don't have the complete code because my LayoutProcessor is editted a lot because we used this for our checkout extension: https://www.bigbridge.nl/magento-2-enhanced-checkout/ (input types will be in the next version).

Update: At the end I found out that the 'tel' format is nicer for phone numbers so I would recommend replacing number with tel ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.