0

Estou desenvolvendo uma interface web com HTML5, CSS3 e o framework Bootstrap 3, e usando o type="number" na tag <input> nos smartphones o teclado nativo do Android abre em modo numérico.

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

Porém o campo exibe o recurso de acréscimo e decréscimo de valor decimal, e a finalidade do campo não é número inteiro e sim para CEP. Alterando para type="text" do <input>, o teclado que se abre é o "qwerty"type="text", e não é o resultado esperado.

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

De que modo adapto o campo type="text" para que nos smartphones o teclado numérico nativo seja exibido ao invés do "qwerty".

0

1 Resposta 1

2

Estou bem certo que não é possível customizar os teclados em iOS e Android via páginas web e se existir algo provavelmente não é cross-platform.

A minha sugestão para contornar o problema é usar type="tel" (porque type="number" não permite usar valores diferentes de números dentro do value="") com uma máscara simples para CEP, assim o keyup+regex já removeria o que não é numero e o que não é hífen

Eu criei um exemplo bem simples:

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="_____-___" />

Explicações sobre as regex

A regex /\D+/ remove qualquer coisa que não for numero, deixando então somente o que é numero.

A regex /^(\d{5})(\d{1,3}).*$/ pega no primeiro grupo (\d{5}) os primeiros 5 numeros e adiciona ao replace para $1-

O segundo grupo (\d{1,3}) pega de um a três numeros após o quinto numero do value e aplica ao $2 que vem depois do hífen.

O .*$ remove qualquer numero que sobrou (ou foi digitado a mais), neste caso para facilitar seria interessante também usar maxlength="" no <input>, porque evitaria a pessoa digitar a mais, deve-se usar maxlength="9", porque apesar do CEP ter 8 números o hífen tem que ser contado também.

Ficando algo como:

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" />

2
  • Vou adaptar para usar em classes ao invés de Id's para minha necessidade, funcionou perfeito, obrigado!
    – ElvisP
    3/11/2019 às 1:12
  • 1
    @EliseuB. por nada, sim é possivel adaptar com classes usando um for, ou então para simplificar poderia usar delegação de eventos, aplicando keyup (para iOS, input evento em delegação não funciona no iOS -.-), veja como aplicar a delegação: pt.stackoverflow.com/q/210753/3635 ... se precisar de um "polyfill" para rodar em navegadores e celulares mais antigos veja a minha resposta (que é um adendo a resposta do Sérgio): pt.stackoverflow.com/a/211420/3635 (delegação ajuda a evitar que tenha que adicionar os eventos "manualmente" e nem precisará do DOMContentLoaded ou onload)
    – Syzoth
    3/11/2019 às 1:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .