Cómo ingresar un número de teléfono en el formulario. Enmascaramiento y validación del campo del teléfono usando jQuery. Crear una máscara de entrada HTML

Este complemento jQuery le permite seleccionar automáticamente la máscara de entrada adecuada según el comienzo ingresado del número de teléfono. Esto le permite ingresar un número de teléfono en la página de un sitio web de manera más rápida y sin errores. Además, el complemento desarrollado se puede utilizar en otras áreas si las reglas de entrada se pueden representar en forma de varias máscaras de entrada.

Introducción Los sitios web requieren ingresar información del número de teléfono. Sucede que cada país tiene derecho a establecer sus propias reglas de marcación y longitud del número, por lo que periódicamente surge confusión entre residentes de diferentes países: algunos están acostumbrados a indicar el número con el dígito inicial 8, otros con el número inicial 8. dígito 0, y otros con un signo +. Revise las soluciones existentes Para resolver de alguna manera la complejidad y llevar los números a un formato unificado, existen 3 soluciones principales:

Se solicita al usuario que ingrese el número usando una máscara de entrada. Ventaja: La visualización clara del número minimiza posibles errores en el número. Desventaja: cada país tiene su propia ortografía y longitud de números.

Se solicita al usuario que seleccione el país por separado e ingrese el resto del número por separado; posible usando una máscara de entrada. Ventaja: la capacidad de utilizar diferentes máscaras de entrada para diferentes países (así como regiones dentro de un país). Desventajas: la lista de países (y regiones dentro de cada país) puede ser grande; el número de teléfono deja de existir como un todo (o se requiere un procesamiento previo antes de guardar y mostrar el número).

Coloque un signo + delante del número (fuera de la entrada) y permita que solo se ingresen números. Ventajas: facilidad de implementación. Desventaja: falta de visualización visual del número.

Solución propuesta Como resultado, se decidió modificar la máscara de entrada habitual para que cambie de acuerdo con el valor actual del número. Además, al ingresar el número, se le solicitará que muestre el nombre del país identificado. Este enfoque, subjetivamente, debería resolver todas las deficiencias de las soluciones enumeradas anteriormente.

Teniendo en cuenta el hecho de que el número de países del mundo es relativamente pequeño, se decidió compilar una lista de máscaras de entrada para todos los países. Se utilizó como fuente información publicada en el sitio web de la Unión Internacional de Telecomunicaciones.

La recopilación de esta información trajo muchas sorpresas. En el proceso de recopilación de información, fue necesario tener en cuenta todas las opciones posibles de números de teléfono, incluso dentro del país. Sin embargo, debido a la gran cantidad de información procesada manualmente, es posible que queden imprecisiones en la base de datos recopilada. Está previsto realizar correcciones al conjunto inicial con el tiempo.

Implementación del software La implementación jquery.inputmask, que se mencionó muchas veces en Habrahabr, se utilizó como núcleo de la máscara de entrada. Este complemento se está desarrollando activamente actualmente y, además, está diseñado de tal manera que es bastante fácil escribirle extensiones. Sin embargo, en este problema resultó casi imposible escribir una extensión de este tipo. No modifiqué ni reescribí el complemento original para adaptarlo a mis necesidades, porque... su autor continúa trabajando activamente para ampliar la funcionalidad, por lo que la aplicación de mis ediciones puede resultar problemática. Por lo tanto, tuve que escribir un complemento sobre el núcleo principal, que monitorea (además de interceptar) las influencias externas y realiza modificaciones de datos. Para implementar nuestros manejadores de influencia externa antes que los manejadores del complemento principal, utilizamos el complemento de biblioteca jquery.bind-first. Ordenar las máscaras de entrada permitidas Para seleccionar correctamente la máscara de entrada más adecuada, primero se debe ordenar todo el conjunto de máscaras en un formato especial. forma. Al desarrollar reglas de clasificación, se adoptaron las siguientes convenciones:

Todos los caracteres en la máscara de entrada se dividen en 2 tipos: caracteres significativos (en mi caso, este es el símbolo #, que significa un número arbitrario y los números del 0 al 9) y caracteres decorativos (todos los demás).

Otra división de caracteres en la máscara de entrada son los caracteres comodín (en mi caso, este es el símbolo #) y todos los demás.

El resultado son las siguientes reglas de clasificación en el orden en que se aplican:

Al comparar dos máscaras de entrada carácter por carácter, solo se tienen en cuenta los caracteres significativos (no los decoradores).

Los diferentes caracteres comodín se tratan como iguales y otros caracteres importantes se comparan según su código.

Los símbolos que no son de plantilla son siempre más pequeños que los símbolos de plantilla y, como resultado, están colocados más arriba.

Cuanto más corta sea la longitud de los caracteres significativos en la máscara de entrada, más pequeña se considera la máscara de entrada y se posiciona más arriba.

Encontrar una máscara de entrada adecuada Al comparar el texto de entrada con la siguiente máscara de la lista ordenada, sólo se tienen en cuenta los caracteres significativos de cada máscara. Si una línea es más larga que una máscara de entrada aunque todos los caracteres anteriores hayan pasado la prueba, la máscara de entrada se considera inválida. Si el texto de entrada coincide con varias máscaras de entrada, se devuelve la primera. A continuación, en la máscara encontrada, todos los caracteres significativos (incluidos los que no son de plantilla) se reemplazan por uno de plantilla, que es una combinación de todos los caracteres permitidos por cualquiera de los símbolos de plantilla. Procesamiento e interceptación de eventos Para evitar conflictos con controladores de eventos del núcleo principal de la máscara de entrada, se interceptan los siguientes eventos:

keydown: las pulsaciones de teclas de retroceso y eliminación se monitorean para cambiar la máscara de entrada actual antes de que el controlador principal elimine un carácter del texto. Además, se monitorea la sincronización al presionar la tecla Insertar, que cambia el modo de entrada de texto.
Pulsación de tecla: dado que es posible que la máscara de entrada original no permita el carácter ingresado (ya que todos los caracteres importantes que contiene se reemplazan por un comodín), es necesario verificar la nueva línea para que cumpla con una de las máscaras permitidas. Si no existen tales máscaras, entonces la entrada de caracteres se descarta; de lo contrario, la máscara de entrada se actualiza, después de lo cual el evento se pasa al controlador del kernel.
pegar, ingresar: pegar texto desde el portapapeles. Antes de transferir el procesamiento al kernel, se selecciona una máscara de entrada para la cadena resultante de pegar texto desde el portapapeles. Si no se puede encontrar la máscara de entrada, el texto se recorta carácter por carácter desde el final hasta que el texto coincida con al menos una máscara de entrada. Se realiza una operación similar al corregir texto en un campo de entrada llamando a la función val(), así como al inicializar una máscara de entrada si se aplica a un campo de entrada que no está vacío.
dragdrop, drop: el procesamiento es similar al evento de pegado.
desenfoque: procesamiento adicional en caso de que el modo de borrado de texto esté habilitado cuando se pierda el enfoque si no cumple con la máscara de entrada. Este evento se intercepta después del controlador principal, a diferencia de los anteriores.

Todos los eventos se cuelgan en el espacio de la máscara de entrada. Esto evita un comportamiento incorrecto al llamar a inputmask después de inicializar el complemento (ya que el kernel elimina todos los controladores instalados previamente en el espacio de inputmask durante la inicialización).

Ejemplo de uso Formato de lista de máscaras Una lista de máscaras es una matriz de objetos de JavaScript, preferiblemente con el mismo conjunto de propiedades. Al menos una propiedad que contenga una máscara de entrada debe estar presente para todos los objetos de la matriz. El nombre del parámetro que contiene la máscara puede ser arbitrario. A continuación se muestra un fragmento de dicha matriz:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Rusia", "desc_en": "", " name_ru": "Rusia", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Arabia Saudita", "desc_en": "mobile", "name_ru": "Arabia Saudita", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Arabia Saudita", "desc_en": "", "name_ru": "Arabia Saudita", "desc_ru": " " ), … ] Parámetros de conexión del complemento Antes de conectarse, debe cargar y ordenar la lista de máscaras. Esto se hace ejecutando la siguiente función:
$.masksSort = función(listamáscaras, defs, coincidencia, clave)

maskList: una matriz de objetos que almacenan máscaras de entrada (ver fragmento de objeto más arriba);
defs: una serie de caracteres comodín (en mi caso es el símbolo #);
coincidencia: una expresión regular que describe caracteres significativos (en mi caso es /|#/);
clave es el nombre del parámetro del objeto de matriz que contiene la máscara de entrada.

Cuando se conecta, el complemento recibe un objeto especial que describe su funcionamiento. Este objeto contiene el siguiente conjunto de parámetros:

máscara de entrada: un objeto que contiene parámetros pasados al complemento principal de máscara de entrada;
coincidencia: una expresión regular que describe caracteres importantes, excluidos los comodines;
reemplazar: un carácter comodín por el que se reemplazarán todos los caracteres importantes; puede no estar presente en el objeto de definiciones del objeto de máscara de entrada;
lista: una serie de objetos que describen máscaras de entrada;
listKey: nombre del parámetro dentro del objeto que almacena la máscara de entrada;
onMaskChange: una función que se llama cuando se actualiza la máscara de entrada; el primer parámetro es un objeto de la matriz, cuya máscara de entrada corresponde al texto ingresado, y el segundo parámetro es la precisión de la definición de la máscara: verdadero: la máscara de entrada coincide completamente, falso: se deben ingresar caracteres adicionales para que sean confiables definir la máscara.

Para inicializar el complemento, debe aplicar el método inputmasks al campo de entrada:
$.fn.inputmasks = función(maskOpts, modo)

maskOpts: un objeto que describe el funcionamiento del complemento;
modo - opcional; actualmente se admite el valor isCompleted; como resultado, el método devuelve verdadero si el texto correspondiente a la máscara coincidente se ingresa completamente y falso en caso contrario.

Ejemplo de conexión de complemento
Máscara de entrada var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definiciones: ( "#": ( validador: "", cardinalidad: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, reemplazar: "# ", lista: maskList, listKey: "máscara", onMaskChange: función(maskObj, completado) ( if (completado) ( var sugerencia = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( sugerencia + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("Máscara de entrada"); ) $(this ).attr("placeholder", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#teléfono_cliente").inputmask("+[####################]", maskOpts.inputmask) .attr("marcador de posición", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Máscara de entrada"); ) )); $("#phone_mask").cambiar(); Demostración Un ejemplo de una demostración del complemento desarrollado se presenta en

A primera vista, la respuesta es obvia: marque el campo "número de teléfono" como sea necesario. Pero hay nichos en los que un usuario puede abandonar el sitio debido a campos obligatorios innecesarios. Por ejemplo, aplicaciones, software, sitios de venta de contenidos. Sin embargo, el número de usuarios de este tipo de proyectos es importante como dato adicional que permite interactuar con clientes potenciales en el futuro. Además, existe una solución sencilla y eficaz: utilizar una máscara de entrada. Demostremos esto con casos.

¿Por qué necesitas una máscara de entrada?

La máscara de entrada muestra en qué formato necesita ingresar datos en el campo. Por ejemplo, si un usuario ingresa un número de teléfono sin un código de área o un número de teléfono en el campo de dirección, no podrá avanzar a la siguiente opción. La máscara en los formularios proporciona una apariencia uniforme de los datos ingresados, lo que simplifica la búsqueda y gestión de la base de datos. Según las recomendaciones de Netpeak, una máscara de entrada del número de teléfono es un elemento obligatorio en el formulario de pedido en el sitio web. Como cualquier recomendación práctica de nuestros especialistas, esta disposición se basa en casos exitosos de clientes.

Dado que el sitio se especializaba en aplicaciones, el campo para ingresar un número en el sitio era opcional. Para realizar un seguimiento de los cambios en el porcentaje de clientes que completan el campo "teléfono" en el formulario de pedido del sitio, utilizamos una variable personalizada en Google Analytics. En febrero, ninguno de los nueve clientes llenó el campo "teléfono". En marzo, introdujimos una máscara de entrada y los usuarios comenzaron a completarla. Para garantizar la pureza del experimento, el campo se dejó como opcional y no se realizaron otros cambios.
El resultado de marzo fue de 19 problemas con 22 usuarios que completaron la solicitud. Es decir, el 85% de los usuarios que ordenaron la aplicación dejaron su número de teléfono.

Estudio de caso del sitio web del centro de información: aumento del número de entradas de campos de números de teléfono en un 15,4 %

El sitio web del cliente proporciona servicios para la redacción de ensayos, trabajos de curso, disertaciones y otros trabajos. El número de teléfono del usuario es deseable para comunicarse, pero en el sitio este campo era opcional. El usuario no pudo completar el formulario ni escribir nada en este campo. Como la primera vez, en la primera etapa configuramos el seguimiento para completar el campo "teléfono" en Google Analytics. En noviembre, de 59 solicitudes dejadas por los visitantes del sitio, 15 no contenían números. Es decir, la empresa recibió sólo el 74,6% de los formularios enviados con un número completo. Luego agregamos una máscara de entrada al campo del teléfono. En diciembre, el sitio recibió 60 solicitudes. Además, sólo 6 formularios completados no contenían el número de teléfono del cliente. En consecuencia, el 90% de los formularios de pedido presentados contenían un campo de teléfono correctamente cumplimentado. Durante el mes: un aumento del 15,4%, sólo gracias a la introducción de una máscara de entrada de números. Finalmente, un estudio de caso interno de la agencia.

El campo para los números en el formulario de pedido en el sitio web de Netpeak también es opcional. Pero los números de teléfono son importantes para que los clientes siempre sepan el número y el estado de su solicitud (enviamos estos datos por SMS), así como para optimizar el trabajo de los gestores de cuentas. El período del experimento, como en ejemplos anteriores, es de dos meses. Como resultado de la aparición de la máscara de entrada de números, el porcentaje de formularios completados aumentó del 44% al 83%, es decir, un 39,4%.
Después del experimento, implementamos la máscara en el sitio. El campo para ingresar un número sigue siendo opcional. La solicitud no se procesará solo si se ingresa un número incorrecto en este campo. En este caso, los primeros dígitos de la máscara cambian según el país en el que se encuentra el usuario del sitio. Si hablamos de un formulario de pedido anticipado, entonces es interesante saber qué calidad tienen las aplicaciones con números de teléfono. Tomamos todos los clientes potenciales recibidos a través del formulario de pedido anticipado y calculamos el porcentaje de aquellos que se convirtieron en clientes con y sin número. Este último resultó ser el mayor con un 0,81%.

Conclusión: si una persona te deja su número en el formulario, esto no garantiza la transferencia de fondos.

Si hablamos del formulario de reserva, pasan a primer plano las posibilidades de reactivar clientes, oportunidades que se abren para los especialistas en marketing armados con una base de datos de números de teléfono personales de los usuarios. Hablaremos de casos exitosos de reactivación en uno de nuestros nuevos posts. Mientras tanto, le recomendamos leer sobre las medidas que se deben tomar antes de cualquier acción con los números de teléfono en la base de datos. Comparta en los comentarios su experiencia al implementar una máscara de entrada para números de teléfono y sus observaciones sobre la calidad de las aplicaciones entrantes.