Como criar um selecionador de números de telefone simples
Números de telefone, além de nomes e e-mails, são as informações de contato mais usadas nos formulários on-line. Os campos de números de telefone geralmente são projetados de forma que os usuários precisem digitar os números usando seus teclados. Este método freqüentemente resulta em entrada de dados imprecisa.
Para reduzir erros de entrada do usuário e melhorar a experiência do usuário do seu site, você pode criar um GUI que permite que os usuários insiram rapidamente seu número de telefone, de forma semelhante aos selecionadores de data.
Neste tutorial, você verá como adicionar um seletor de número de telefone simples a um campo de entrada. Usaremos HTML5, CSS3 e JavaScript para acessar a GUI que você pode ver e testar na demonstração abaixo. Também usaremos expressões regulares para garantir que os usuários realmente digitem um número de telefone válido.
1. Criar o campo de número de telefone
Primeiro, criar um campo de entrada com um ícone de discagem à direita que abrirá a tela de discagem ao clicar. O ícone de discagem parece com 9 caixas pretas, organizadas 3 por 3, devem gostar do que você vê em um telefone comum.
Estou usando o tel tipo de entrada para a semântica HTML5 adequada, mas você também pode usar o texto tipo de entrada se você quiser.
2. Crie a tela de discagem
o tela de discagem é uma grade de números de 0 a 9, mais alguns caracteres especiais. Pode ser feito com um HTML Aqui, mostrarei como criar a tabela da tela de discagem em JavaScript. Você pode, claro, adicionar a tabela diretamente no código-fonte HTML, se preferir assim. Primeiro, crie um novo Adicione um Os dois A última linha é diferente, pois consiste em dois personagens especiais, Para criar a última linha na tela de discagem, adicione o seguinte o tela de discagem agora está completa, adicione-o ao Para torná-lo mais atraente, estilo a tela de discagem com CSS. Você não precisa necessariamente ficar com o meu estilo, mas não se esqueça de adicionar Primeiro, adicione o Em seguida, adicione um manipulador de eventos de clique ao ícone de discagem com JavaScript para alternar a visibilidade da tela de discagem. Para fazer isso, você precisa usar o o Adicione uma função personalizada que insere dígitos no campo de número de telefone no clique das células da tela de discagem. o Agora você tem um tela de discagem de trabalho para inserir o campo de número de telefone. Para acompanhar o CSS, altere a cor de fundo dos dígitos em seus Adicione um validação de regex simples para validar o número de telefone enquanto o usuário insere os dígitos no campo de entrada. De acordo com as regras de validação que eu uso, o número de telefone só pode começar com um dígito ou o Você pode ver a visualização da minha expressão regular no screenhow abaixo criado com o aplicativo Debuggex. Você também pode validar o número de telefone de acordo com o formato do número de telefone do seu país ou região. Crie um novo objeto Expressão Regular e armazene-o no Quando a entrada não valida, o Eu estou adicionando uma borda vermelha para o campo de entrada quando a entrada é inválida, mas você pode informar o usuário de outras maneiras, por exemplo, com mensagens de erro. o Note que eu também adicionei um validação adicional para caracteres máximos (não pode ser maior que 15) usando um Seu apanhador de números de telefone agora está pronto, confira a demonstração final abaixo. ou JavaScript.
'mesa' elemento no DOM usando o createElement () método. Também dê a ele 'discar' identificador. / * Criar tela de discagem * / var dial = document.createElement ('table'); dial.id = 'discar'; para laço para inserir as quatro linhas da tabela de discagem com ele. Então, para cada linha, executar outro para laço a fim de adicionar três células por linha. Marque cada célula com o 'dialDigit' classe. para (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
para loops acima calcular os dígitos que vão para as células da tabela de discagem - os valores do cell.textContent propriedade - da seguinte maneira: (colum + 1) + (rowNum * 3) / * primeira linha * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * segunda linha * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- e + que são usados em formatos de números de telefone para identificar códigos regionais e o dígito 0.E se declaração para o interior para laço. para (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper Contêiner HTML que você criou na Etapa 1 usando dois métodos DOM:querySelector () método para selecione o contêinerappendChild () método para anexar a tela de discagem - realizada no discar variável - para o contêiner document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Estilize a tela de discagem
user-select: nenhum; propriedade para o #dial recipiente para que, enquanto o usuário estiver clicando nos dígitos, o texto não será selecionado pelo cursor. #dial width: 200px; altura: 200 px; border-collapse: colapso; texto-alinhar: centro; posição: relativa; -ms-user-select: nenhum; -webkit-user-select: nenhum; -moz-user-select: nenhum; user-select: nenhum; cor: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; cursor: ponteiro; cor de fundo: rgba (255,228,142, 0,7);
4. Mostrar a tela de discagem no clique
visibilidade: oculto; regra de estilo para #dial no CSS acima para esconder a tela de discagem por padrão. só será mostrado quando o usuário clicar no ícone de discagem.querySelector () e a addEventListener () métodos. O último anexa um evento de clique para o ícone de discagem e chama o toggleDial () função.toggleDial () função muda a visibilidade da tela de discagem de oculto para visível e de volta. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'oculto' || dial.style.visibility === "? 'visible': 'hidden'; 5. Adicione a funcionalidade
dialNumber () função acrescenta os dígitos um por um ao textContent propriedade do campo de entrada marcado com o #telefone não identificador. phoneNo = document.querySelector ('# phoneNo'); função dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); para (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :flutuar e :ativo (quando o usuário clica nele) afirma. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Adicionar validação de expressão regular
+ personagem, e aceitar o - personagem depois.
padronizar variável. Também crie um costume validar() função que verifica se o número de telefone digitado cumpre com a expressão regular, e se é pelo menos 8 caracteres.validar() função precisa dê retorno para o usuário. padrão = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); função validate (txt) // pelo menos 8 caracteres para um número de telefone válido. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Execute a validação
validar() funções precisa ser chamado a fim de realizar a validação. Chame-o do dialNumber () função que você criou no Passo 5, a fim de validar o valor do telefone não variável.E se declaração. função dialNumber () var val = phoneNo.value + this.textContent; // caracteres máximos permitidos, 15 if (val.length> 15) return false; validar (val); phoneNo.value = val;
