Change Billing Address Telephone Input Type

Question

I am trying to change the telephone input type from "text" to "tel", so that on mobile devices a number pad will display. I have tried to implement the solution outlined https://magento.stackexchange.com/a/337363/56479, but I am not able to get it to work.

I am looking for a solution for the Billing Address, not the Shipping Address. I have successfully been able to modify the Shipping Address.

Am I missing something?

/app/code/Vendor/Module/etc/frontend/di.xml

I've tried putting the di.xml file in just the "etc" folder, but that also did not seem to make a difference.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="update_billing_telephone" type="Vendor\Module\Plugin\Block\Checkout\LayoutProcessor"/>
</type>
</config>

/app/code/Vendor/Module/Plugin/Block/Checkout/LayoutProcessor.php

namespace Vendor\Module\Plugin\Block\Checkout;

class LayoutProcessor
{
/**
 * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
 * @param array $jsLayout
 * @return array
 */
public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $subject, $result, $jsLayout)
{

    $result["components"]["checkout"]["children"]["steps"]["children"]["billing-step"]["children"]["payment"]
        ["children"]["afterMethods"]["children"]["billing-address-form"]["children"]["form-fields"]["children"]
        ["telephone"]['config']['elementTmpl'] = 'Vendor_Module/form/element/tel-input';

        return $result;

}
}

I've tried putting the tel-input.html file in both base and frontend, but neither seem to make a difference.

/app/code/Vendor/Module/view/frontend/web/template/form/element/tel-input.html

<input class="input-text" type="tel" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}" />

Answer 1

You can change the input type of telephone input field using XML.

Firstly, please create a template file to change field type.

app/design///Magento_Ui/web/template/form/element/number.html

<input class="input-text" type="tel" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />

Now, Assign this template file to the telephone field.

To assign a template file to the field, need to change in the checkout_index_index.xml file.

app/design///Magento_Checkout/layout/checkout_index_index.xml

<referenceBlock name="checkout.root">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="checkout" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="steps" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="shipping-step" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shippingAddress" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shipping-address-fieldset" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="telephone" xsi:type="array">
                                                            <item name="config" xsi:type="array">
                                                                <item name="elementTmpl" xsi:type="string">Magento_Ui/form/element/number</item>
                                                                <item name="tooltip" xsi:type="array">
                                                                    <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

Now, Please run below commands:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Hope it will help you.

Answer 2

Instead of trying to build a new extension for this, I ended up just using jQuery to change the input type from 'text' to 'tel'.

app/design/frontend/Vendor/default/Magento_Checkout/templates/onepage.phtml

<script type="text/javascript">

require(['jquery','Magento_Checkout/js/view/payment/default'],function($, paymentview){
    jQuery(document).ready(function() {
        $(document).on('click','input[name="billing-address-same-as-shipping"]', function() {
             $('input[name$="telephone"]').attr('type','tel');
        });
    });
});

</script>