cancel
Showing results for 
Search instead for 
Did you mean: 

Change telephone input field to number

Change telephone input field to number

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? 

10 REPLIES 10

Re: Change telephone input field to number

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');
If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Change telephone input field to number

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.


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Change telephone input field to number

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

Re: Change telephone input field to number

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');            
});
If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Change telephone input field to number

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.



Re: Change telephone input field to number

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

Re: Change telephone input field to number

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

Re: Change telephone input field to number

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

Re: Change telephone input field to number

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