Change telephone input field to number

[SannNL]

I would like to change the input field for telephone in checkout to number to only enable numbers. How would I do something like that? 

[Rakesh Jesadiya]

You can set as below way for telephone text field to number field,

/*global define*/
define([
    'jquery',
    'Magento_Ui/js/form/form'
], function ($, Component) {
    'use strict';

    return Component.extend({
        /**
         * Initialize component
         *
         * @returns {exports}
         */
        initialize: function () {
            this._super();
            this._bind();

            return this;
        },

        _bind: function () {
        	$('input[name="telephone"]').attr('type','number');
        },
    });
});

Just like below way,

$('input[name="telephone"]').attr('type','number');

[Sunil Patel]

Hello @SannNL

you can do using XML and UI component as well

In checkout_index_index.xml

<item name="telephone" xsi:type="array">
	<item name="component" xsi:type="string">Magento_Ui/js/form/element/telephone</item>
	<item name="config" xsi:type="array">
		<item name="tooltip" xsi:type="array">
			<item name="description" xsi:type="string" translate="true">For delivery questions.</item>
		</item>
	</item>
</item>

you need to created 

Magento_Ui/js/form/element/telephone.js file into your theme 

code of that file is 

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @api
 */
define([
    './abstract'
], function (Abstract) {
    'use strict';

    return Abstract.extend({
        defaults: {
            elementTmpl: 'ui/form/element/number'
        }
    });
});

you need to create a template file for that number.html file

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<input class="admin__control-text" type="number"
    data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled,
            maxlength: 255
    }"/>

 Hope it will help you.

If like then give kudos or mark as solution.

[SannNL]

Thanks for your help, sadly both of these solutions don't seem to do anything to the type of my telephone field. They also don't return any errors. @Rakesh Jesadiya @Sunil Patel

[Rakesh Jesadiya]

Add below script in your js file which were called in checkout page,

$('body').on('hover','input[name="telephone"]',function(event){     
    $('input[name="telephone"]').attr('type','number');            
});

[vishal_sutariya1]

Hello,

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

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

app/design/<vendor>/<theme>/Magento_Ui/web/template/form/element/number.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<input class="input-text" type="number" 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/<vendor>/<theme>/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:static-content:deploy
php bin/magento cache:flush

Hope it will help you.

If like then give kudos or mark as solution.

[sundeep_kumar]

@SannNL  There is settings for input validation in admin > Stores > Attributes > Customer Address > Zip/Postal Code : change Input Validation to Numeric Only.   

[dsa_dasdsa]

@sundeep_kumar  Unfortunately, this solution only mark a validate to that telephone input, not change it to type="number"

[kinjaljacky]

i also agree with this i also try with all possible solution but not change the type to number

[SannNL]

I started this topic two years ago but came across this problem today again for a different customer of ours. But i found a solution now:

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 edited 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).