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? 

4 REPLIES

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.

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.

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.