Máscaras de números de telefone. Mascarando e validando um campo de telefone com jQuery

Este plugin para jQuery permite que você selecione automaticamente a máscara de entrada apropriada com base no início inserido do número de telefone. Isso permite que você insira um número de telefone na página de um site de forma mais rápida e livre de erros. Além disso, o plug-in desenvolvido pode ser utilizado em outras áreas, desde que as regras de entrada possam ser representadas na forma de várias máscaras de entrada.

Introdução

Em sites, é muito necessário inserir informações de número de telefone. Acontece que cada país tem o direito de estabelecer suas próprias regras de discagem e a extensão do número, em decorrência do qual entre residentes países diferentes confusão surge periodicamente: alguns estão acostumados a indicar um número com um dígito inicial 8, outros com um dígito inicial 0 e ainda outros com um sinal de +.

Revisão das soluções existentes

Para resolver de alguma forma a complexidade que surgiu e trazer os números para um único formato, existem 3 soluções principais:
  1. O usuário é solicitado a inserir o número usando uma máscara de entrada. Vantagem: a exibição clara do número minimiza possíveis erros de número. Desvantagem: cada país tem sua própria grafia e extensão do número.
  2. O usuário é solicitado a selecionar separadamente o país e inserir o restante do número separadamente; possivelmente usando uma máscara de entrada. Vantagem: a capacidade de usar máscaras de entrada diferentes para países diferentes (bem como regiões dentro de um país). Desvantagens: A lista de países (e regiões dentro de cada país) pode ser grande; o número de telefone deixa de existir como um todo (ou o pré-processamento é necessário antes de salvar e exibir o número).
  3. Coloque um sinal de + na frente de um número (fora da entrada) e só permita a entrada de números. Vantagens: facilidade de implementação. Desvantagem: falta de exibição visual do número.

Solução proposta

Como resultado, decidiu-se modificar a máscara de entrada usual para que ela mude de acordo com o valor atual do número. Além disso, ao inserir o número, você será solicitado a exibir o nome do país definido. Esta abordagem, subjetivamente, deve resolver todas as desvantagens das soluções acima.

Levando em consideração o fato de que o número de países no mundo é relativamente pequeno, decidiu-se compilar uma lista de máscaras de entrada para todos os países. As informações publicadas no site da União Internacional de Telecomunicações foram utilizadas como fonte.

A coleta dessas informações trouxe muitas surpresas. No processo de coleta de informações, foi necessário levar em consideração todos os opções possíveis números de telefone, inclusive dentro do país. No entanto, em vista de um grande número informações processadas manualmente, é possível que imprecisões tenham permanecido no banco de dados coletado. É planejado fazer correções no conjunto original ao longo do tempo.

Implementação de software

A implementação jquery.inputmask, que foi mencionada várias vezes no Habrahabr, foi usada como o núcleo da máscara de entrada. Este plugin está agora a ser desenvolvido activamente e, além disso, foi concebido de forma a que seja bastante fácil escrever extensões. No entanto, nesta tarefa, tornou-se quase impossível escrever tal extensão. Eu não modifiquei ou reescrevi o plugin original para atender às minhas necessidades, uma vez que seu autor continua a trabalhar ativamente na expansão da funcionalidade, o que pode resultar em problemas para a aplicação de minhas edições. Portanto, tive que escrever um plugin adicional sobre o núcleo principal que monitora (mais intercepta) influências externas e faz modificações de dados. Para implementar seus gerenciadores influências externas antes dos manipuladores de plug-ins principais, a biblioteca de plug-ins jquery.bind-first foi usada.
Classificando máscaras de entrada permitidas
Para a seleção correta da máscara de entrada mais adequada, todo o conjunto de máscaras deve ser classificado de uma maneira especial. Ao desenvolver regras de classificação, as seguintes convenções foram adotadas:
  1. Todos os caracteres da máscara de entrada são divididos em 2 tipos: símbolos significativos(no meu caso, este é o símbolo #, que significa um dígito arbitrário e os números 0-9) e símbolos do decorador (todo o resto).
  2. Outra divisão de caracteres na máscara de entrada são os caracteres curinga (no meu caso, é o símbolo #) e todo o resto.

O resultado são as seguintes regras de classificação, na ordem em que são aplicadas:

  1. Ao comparar 2 máscaras de entrada caractere por caractere, apenas caracteres significativos (não decoradores) são levados em consideração.
  2. Diferentes caracteres curinga são tratados como iguais e outros caracteres significativos são comparados com base em seu código.
  3. Os símbolos que não são do modelo são sempre menores do que os do modelo e, como resultado, estão localizados mais acima.
  4. Quanto menor for o comprimento dos caracteres significativos na máscara de entrada, menor será e maior será a máscara de entrada.
Encontrar uma máscara de entrada adequada
Ao comparar o texto de entrada com a próxima máscara da lista classificada, apenas os caracteres significativos de cada máscara são levados em consideração. Se a string for mais longa do que a máscara de entrada, mesmo que todos os caracteres anteriores tenham sido validados, a máscara de entrada é considerada inválida. Se várias máscaras de entrada satisfizerem o texto de entrada, a primeira delas será retornada. Além disso, na máscara encontrada, todos os símbolos significativos (incluindo os que não são do modelo) são substituídos por um modelo, que é uma combinação de todos os símbolos permitidos por qualquer um dos símbolos do modelo.
Tratamento e interceptação de eventos
Para evitar conflitos com os manipuladores de eventos do núcleo principal da máscara de entrada, os seguintes eventos são interceptados:
  • keydown- Os pressionamentos de tecla Backspace e Delete são monitorados - para alterar a máscara de entrada atual antes que o manipulador principal remova um caractere do texto. Além disso, o pressionamento da tecla Insert é rastreado, o que altera o modo de entrada de texto para sincronização.
  • pressione o botão- uma vez que o caractere inserido pode não ser resolvido pela máscara de entrada original (uma vez que todos os caracteres significativos nele são substituídos por um modelo), você precisa verificar nova linha para satisfazer uma das máscaras permitidas. Se não houver essas máscaras, a entrada de caractere é descartada, caso contrário, a máscara de entrada é atualizada, após o que o evento é passado para o manipulador do kernel.
  • colar, entrada- colar texto da área de transferência. Antes de transferir o processamento para o kernel, a máscara de entrada é selecionada para a linha, que foi obtida como resultado da colagem do texto da área de transferência. Se não foi possível encontrar a máscara de entrada, o texto é truncado caractere por caractere do final até que o texto satisfaça pelo menos uma máscara de entrada. Uma operação semelhante é realizada ao corrigir o texto em um campo de entrada chamando a função val (), bem como ao inicializar uma máscara de entrada se ela for aplicada a um campo de entrada não vazio.
  • arraste e solte, derrubar- o processamento é semelhante ao evento colar.
  • borrão - processamento adicional caso o modo de limpar o texto em caso de perda de foco esteja habilitado, se não satisfizer a máscara de entrada. Este evento é interceptado após o manipulador principal, ao contrário dos anteriores.

Todos os eventos são suspensos no espaço da máscara de entrada. Isso evita o comportamento incorreto ao chamar a máscara de entrada depois que o add-in é inicializado (uma vez que o kernel remove todos os manipuladores instalados anteriormente no espaço da máscara de entrada durante a inicialização).

Exemplo de uso

Formato da lista de máscaras
A lista de máscaras é um array JavaScript de objetos, de preferência com o mesmo conjunto de propriedades. Todos os objetos da matriz devem ter pelo menos uma propriedade que contenha a máscara de entrada. O nome do parâmetro que contém a máscara pode ser arbitrário. Abaixo está um fragmento de tal array:
[… ("Mask": "+7 (###) ### - ## - ##", "cc": "RU", "name_en": "Russia", "desc_en": "", " name_ru ":" Russia "," desc_ru ":" "), (" mask ":" +250 (###) ### - ### "," cc ":" RW "," name_en ":" Ruanda "," desc_en ":" "," name_ru ":" Ruanda "," desc_ru ":" "), (" mask ":" + 966-5 - #### - #### "," cc ":" SA "," name_en ":" Arábia Saudita "," desc_en ":" móvel "," name_ru ":" Arábia Saudita "," desc_ru ":" móvel "), (" máscara ":" + 966- # - ### - #### "," cc ":" SA "," name_en ":" Arábia Saudita "," desc_en ":" "," name_ru ":" Arábia Saudita "," desc_en ":" "), ...]
Parâmetros de conexão do plug-in
Antes de conectar, você precisa carregar e classificar a lista de máscaras. Isso é feito executando a seguinte função:
$ .masksSort = function (maskList, defs, match, key)
  • maskList- uma matriz de objetos que armazenam máscaras de entrada (para um fragmento de um objeto, veja acima);
  • defs- uma matriz de símbolos de modelo (no meu caso é o símbolo #);
  • Combine- uma expressão regular que descreve caracteres significativos (no meu caso, é / | # /);
  • chave- o nome do parâmetro do objeto de matriz que contém a máscara de entrada.

Quando conectado, um objeto especial é passado para o plugin que descreve seu trabalho. Este objeto contém o seguinte conjunto de parâmetros:

  • máscara de entrada- um objeto contendo parâmetros passados ​​para a máscara de entrada do plugin principal;
  • Combine- uma expressão regular que descreve caracteres significativos, excluindo os do modelo;
  • substituir- um símbolo de modelo, que será substituído por todos os símbolos significativos; Pode não estar presente no objeto de definições do objeto máscara de entrada;
  • Lista- uma série de objetos que descrevem máscaras de entrada;
  • listKey- o nome do parâmetro dentro do objeto que armazena a máscara de entrada;
  • onMaskChange- a função que é chamada quando a máscara de entrada é atualizada; como o primeiro parâmetro, um objeto da matriz é passado, a máscara de entrada correspondente ao texto inserido e, como o segundo, a precisão da definição da máscara: verdadeiro - a máscara de entrada corresponde totalmente, falso - caracteres adicionais são necessários para determinar a máscara de forma confiável.

Para inicializar o plug-in, você precisa aplicar o método inputmasks ao campo de entrada:
$ .fn.inputmasks = function (maskOpts, mode)

  • maskOpts- um objeto que descreve o trabalho do plugin;
  • modo- opcional; v Atualmente o valor isCompleted é suportado - como resultado, o método retorna verdadeiro se o texto que corresponde à máscara correspondente for totalmente inserido e falso caso contrário.
Exemplo de conexão de plug-in

Demonstração

Um exemplo de demonstração do plugin desenvolvido é apresentado em

À primeira vista, a resposta é óbvia: marque o campo "número de telefone" como obrigatório. Mas existem nichos nos quais um usuário pode deixar o site por causa de campos obrigatórios desnecessários. Por exemplo, aplicativos, software, sites de venda de conteúdo. No entanto, os números de usuário para esses projetos são importantes como dados adicionais que tornam possível interagir com clientes em potencial no futuro. Além disso, existe uma solução simples e eficaz - usar uma máscara de entrada. Deixe-nos provar isso com estudos de caso.

Por que você precisa de uma máscara de entrada?

A máscara de entrada mostra em qual formato você precisa inserir dados no campo. Por exemplo, se um usuário inserir um número de telefone sem um código de área ou um número de telefone no campo de endereço, ele não poderá prosseguir para o próximo item. A máscara nos formulários fornece uma aparência uniforme para os dados de entrada, o que torna mais fácil localizar e gerenciar o banco de dados. Nas recomendações da Netpeak, a máscara de entrada do número de telefone é um elemento obrigatório do formulário de pedido no site. Como qualquer recomendação prática de nossos especialistas, esta posição é baseada em casos de clientes de sucesso.

Como o site é especializado em aplicativos, o campo para inserção do número do site é opcional. Para acompanhar a variação da porcentagem de clientes que preenchem o campo "telefone" do formulário de pedido do site, aplicamos uma variável personalizada no Analítica do Google... Em fevereiro, nenhum dos nove clientes preencheu o campo "telefone". Em março, introduzimos uma máscara de entrada e os usuários começaram a preenchê-la. Para a pureza do experimento, o campo foi deixado como opcional e nenhuma outra alteração foi feita.
Resultado de março - 19 questões com 22 usuários que preencheram o aplicativo. Em outras palavras, 85% dos usuários que solicitaram o aplicativo deixaram seu número de telefone.

Estudo de caso do site do centro de informação: aumento do número de preenchimentos do campo do número de telefone em 15,4%

O site do cliente se dedica à redação de ensaios, trabalhos de conclusão de curso, teses e outros trabalhos. O número de telefone do usuário é desejável para comunicação, mas no site este campo era opcional. O usuário não conseguiu preencher o formulário ou escrever nada neste campo. Assim como na primeira vez, na primeira etapa instalamos o acompanhamento do preenchimento do campo "telefone" no Google Analytics. Em novembro, das 59 inscrições enviadas pelos visitantes do site, 15 não continham números. Ou seja, a empresa recebeu apenas 74,6% dos formulários enviados com o número preenchido. Em seguida, adicionamos uma máscara de entrada ao campo do telefone. Em dezembro, o site recebeu 60 inscrições. No entanto, apenas 6 formulários preenchidos não continham o número de telefone do cliente. Consequentemente, 90% dos formulários de pedido enviados continham o campo "telefone" corretamente preenchido. No mês - aumento de 15,4%, apenas devido à introdução de máscara para entrada de números. Finalmente - o caso interno da agência.

O campo para números no formulário de pedido no site da Netpeak também é opcional. Mas os números de telefone são importantes para que o cliente saiba sempre o número e o estado da sua aplicação (enviamos estes dados por SMS), bem como para otimizar o trabalho dos gestores de contas. O período de experiência, como nos exemplos anteriores, é de dois meses. Como resultado do surgimento de uma máscara para entrada de números, o percentual de preenchimento de formulários aumentou de 44% para 83% - em 39,4%.
Após o experimento, implementamos uma máscara no site. O campo para inserir o número permanece opcional. A aplicação não será aprovada somente se um número incorreto for inserido neste campo. Nesse caso, os primeiros dígitos da máscara mudam dependendo do país em que o usuário do site está localizado. Se estamos falando de um formulário de pré-venda, é interessante saber o quão melhor é o aplicativo com números de telefone. Pegamos todas as inscrições já recebidas por meio do formulário de pré-pedido e calculamos a porcentagem daquelas que se converteram em clientes sem número e com ele. Este último acabou sendo o maior, com 0,81%.

Conclusão: se uma pessoa deixar o seu número no formulário, isso não é uma garantia de transferência de fundos.

Se falamos da forma de pré-encomenda, o primeiro plano é a possibilidade de reativar clientes, as oportunidades que se abrem para os marqueteiros armados com uma base de números de telefone pessoais dos usuários. Informaremos sobre casos de reativação bem-sucedidos em uma das novas postagens. Entretanto, aconselhamo-lo a ler sobre as medidas que devem ser tomadas antes de qualquer ação com os números de telefone da base de dados. Compartilhe nos comentários sua experiência ao implementar uma máscara de entrada para números de telefone e observar a qualidade das solicitações recebidas.

ARTIGOS SEMELHANTES