locked
how to change input type from number to tel for android devices RRS feed

  • Question

  • User1729680291 posted

    For Samsung/Android devices, the numeric keypad doesn't show the decimal point, while it works as expected for iphone/ipad.

    So how can we change the input type from number to tel only for android devices.

    Monday, November 10, 2014 11:15 AM

Answers

  • User1729680291 posted

    Got it. Working fine with the below code. Might be helpful for someone else too.

    var navU = window.navigator.userAgent;
    
    // Android Mobile
    var isAndroidMobile = navU.indexOf('Android') > -1 && navU.indexOf('Mozilla/5.0') > -1 && navU.indexOf('AppleWebKit') > -1;
    
    // Android Browser (not Chrome)
    // if appleWebKitVersion < 537, so this is an Android Browser 
    var regExAppleWebKit = new RegExp(/AppleWebKit\/([\d.]+)/);
    var resultAppleWebKitRegEx = regExAppleWebKit.exec(navU);
    var appleWebKitVersion = (resultAppleWebKitRegEx === null ? null : parseFloat(regExAppleWebKit.exec(navU)[1]));
    
    var isAndroidBrowser = isAndroidMobile && appleWebKitVersion !== null && appleWebKitVersion < 537;
    
    if (isAndroidBrowser) {
        
        var idMaxLengthMap = {};
        
        //loop through all input-number element
        $('form input[type="number"]').each(function () {
            var id = $(this).attr('id'),
                typenum = $(this).attr('type', 'number');
            
            //element should have id and type = number attribute
            if ((typeof id !== 'undefined') && (typeof typenum !== 'undefined')) {
    
                //remove maxlength attribute from element
                $(this).removeAttr('type', 'number');
    
                //replace maxlength attribute with onkeypress event
                $(this).attr('type', 'tel');
            }
        });    
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 11, 2014 7:00 AM

All replies

  • User1729680291 posted

    Got it. Working fine with the below code. Might be helpful for someone else too.

    var navU = window.navigator.userAgent;
    
    // Android Mobile
    var isAndroidMobile = navU.indexOf('Android') > -1 && navU.indexOf('Mozilla/5.0') > -1 && navU.indexOf('AppleWebKit') > -1;
    
    // Android Browser (not Chrome)
    // if appleWebKitVersion < 537, so this is an Android Browser 
    var regExAppleWebKit = new RegExp(/AppleWebKit\/([\d.]+)/);
    var resultAppleWebKitRegEx = regExAppleWebKit.exec(navU);
    var appleWebKitVersion = (resultAppleWebKitRegEx === null ? null : parseFloat(regExAppleWebKit.exec(navU)[1]));
    
    var isAndroidBrowser = isAndroidMobile && appleWebKitVersion !== null && appleWebKitVersion < 537;
    
    if (isAndroidBrowser) {
        
        var idMaxLengthMap = {};
        
        //loop through all input-number element
        $('form input[type="number"]').each(function () {
            var id = $(this).attr('id'),
                typenum = $(this).attr('type', 'number');
            
            //element should have id and type = number attribute
            if ((typeof id !== 'undefined') && (typeof typenum !== 'undefined')) {
    
                //remove maxlength attribute from element
                $(this).removeAttr('type', 'number');
    
                //replace maxlength attribute with onkeypress event
                $(this).attr('type', 'tel');
            }
        });    
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 11, 2014 7:00 AM
  • User71929859 posted

    Hi,

    Sorry, misunderstood the question.

    No need of such a long code I guess. You can simply use below. It will work in both Android and iOS.

    <input type="number" pattern="\d*" />
    Tuesday, November 11, 2014 10:18 PM