Display numeric keypad when an input receives focus on mobile version

Question

I’m developing a web interface with HTML5, CSS3 and the framework Bootstrap 3, and using the type="number" on the tag <input> on smartphones the native keyboard of Android open in numeric mode.

<div class="form-group">
    <input type="number" name="cepusuario" id="cepusuario" class="form-control" placeholder="_____-___" />
</div> 

However the field displays the decimal value addition and decrease feature, and the purpose of the field is not integer number, but rather for ZIP. Changing to type="text" of <input>, the keyboard that opens is the "qwerty"type="text", and is not the expected result.

<div class="form-group">
    <input type="text" name="cepusuario" id="cepusuario" class="form-control" placeholder="_____-___" />
</div> 

How I adapt the field type="text" so that on smartphones the native numeric keyboard is displayed instead of "qwerty".

Answer 1

I’m pretty sure cannot customize the keyboards on iOS and Android via web pages and if there is something probably is not cross-Platform.

My suggestion to get around the problem is to use type="tel" (because type="number" does not allow using different values of numbers inside the value="") with a simple ZIP mask, so the keyup+regex would already remove what is not a number and what is not a hyphen

I created a very simple example:

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM carregou');
    
    var cepusuario = document.getElementById('cepusuario');
    
    if (!cepusuario) return;
    
    var mascaraCEPTimeout;
    
    cepusuario.addEventListener('input', function () {
        if (mascaraCEPTimeout) clearTimeout(mascaraCEPTimeout);
        
        mascaraCEPTimeout = setTimeout(mascaraCEP, 200);
    });
    
    function mascaraCEP()
    {
         var cep = cepusuario.value.replace(/\D+/, ''); //Remove tudo que não for numero

         cep = cep.replace(/^(\d{5})(\d{1,3}).*$/, '$1-$2');      
         cepusuario.value = cep;
    }
});

<input type="tel" name="cepusuario" id="cepusuario" class="form-control" placeholder="_____-___" />

Explanations about the regex

A regex /\D+/ remove anything that is not number, then leaving only what is number.

A regex /^(\d{5})(\d{1,3}).*$/ takes the first group (\d{5}) the first 5 numbers and add to replace to $1-

The second group (\d{1,3}) taken from one to three numbers after the fifth number of the value and applies to $2 that comes after the hyphen.

The .*$ removes any remaining number (or has been typed more), in this case to facilitate it would be interesting to also use maxlength="" in the <input>, because it would avoid the person to type the extra, one should use maxlength="9", because although the zip code has 8 numbers the hyphen has to be counted as well.

Getting something like:

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM carregou');
    
    var cepusuario = document.getElementById('cepusuario');
    
    if (!cepusuario) return;
    
    var mascaraCEPTimeout;
    
    cepusuario.addEventListener('input', function () {
        if (mascaraCEPTimeout) clearTimeout(mascaraCEPTimeout);
        
        mascaraCEPTimeout = setTimeout(mascaraCEP, 200);
    });
    
    function mascaraCEP()
    {
         var cep = cepusuario.value.replace(/\D+/, ''); //Remove tudo que não for numero

         cep = cep.replace(/^(\d{5})(\d{1,3}).*$/, '$1-$2');      
         cepusuario.value = cep;
    }
});

<input type="tel" name="cepusuario" id="cepusuario" class="form-control" placeholder="_____-___" maxlength="9" />