Cómo crear un selector de número de teléfono simple
Números de teléfono, Además de los nombres y correos electrónicos, son los datos de contacto más utilizados en los formularios en línea. Los campos de números de teléfono generalmente se diseñan de una manera que requiere que los usuarios escriban los números usando sus teclados. Este método con frecuencia resulta en la entrada de datos inexactos.
A reducir los errores de entrada del usuario y mejorar la experiencia de usuario de su sitio, puede crear un GUI que permite a los usuarios ingresar rápidamente su número de teléfono, de manera similar a los que seleccionan la fecha.
En este tutorial, verás cómo agregar un selector de número de teléfono simple a un campo de entrada. Usaremos HTML5, CSS3 y JavaScript para llegar a la GUI que puede ver y probar en la siguiente demostración. También pondremos expresiones regulares en uso para asegurarnos de que los usuarios realmente ingresen un número de teléfono válido.
1. Crea el campo Número de teléfono
primero, crear un campo de entrada con un icono de marcación a la derecha que abrirá la pantalla de marcación al hacer clic. El ícono de marcado parece 9 cajas negras, dispuestas 3 por 3, debe gustar lo que ve en un teléfono regular.
Estoy usando el tel tipo de entrada para la semántica HTML5 adecuada, pero también puede usar el texto tipo de entrada si quieres.
2. Crear la pantalla de marcación
los pantalla de marcación es una cuadrícula de números de 0 a 9 más algunos caracteres especiales. Se puede hacer con ya sea un HTML Aquí, te mostraré cómo crear la tabla de la pantalla de marcación en JavaScript. Por supuesto, puede agregar la tabla directamente en el código fuente HTML si así lo prefiere.. Primero, crea un nuevo Agrega un Los dos La última fila es diferente, ya que consta de dos personajes especiales, Para crear la última fila en la pantalla de marcación, agregue lo siguiente los la pantalla de marcación ahora está completa, agregarlo a la Para hacerlo más atractivo., estilo de la pantalla de marcación con CSS. No necesariamente tienes que seguir mi estilo, pero no te olvides de añadir Primero, agregue el Luego, agregue un controlador de eventos de clic al icono de marcado con JavaScript a cambiar la visibilidad de la pantalla de marcación. Para ello, es necesario utilizar el mencionado los Agrega una función personalizada que ingresa dígitos en el campo del número de teléfono En el clic de las celdas de la pantalla de marcación.. los Ahora tienes un pantalla de dial de trabajo para ingresar el campo del número de teléfono. Para mantenerse al día con el CSS, cambie el color de fondo de los dígitos en su Agrega un validación simple de expresiones regulares para validar el número de teléfono mientras el usuario ingresa los dígitos en el campo de entrada. De acuerdo con las reglas de validación que utilizo, el número de teléfono solo puede comenzar con un dígito o Puede ver la visualización de mi expresión regular en la siguiente pantalla creada con la aplicación Debuggex. También puede validar el número de teléfono según el formato de número de teléfono de su país o región. Cree un nuevo objeto de expresión regular y guárdelo en el Cuando la entrada no se valida, soy añadiendo un borde rojo al campo de entrada cuando la entrada no es válida, pero puede informar al usuario de otras maneras, por ejemplo, con mensajes de error. los Tenga en cuenta que también he añadido un validación adicional para caracteres máximos (no puede ser más de 15) usando una Tu selector de número de teléfono ya está listo, echa un vistazo a la demostración final a continuación. o JavaScript.
'mesa' elemento en el DOM usando el createElement () método. También dale el 'marcar' identificador. / * Crear pantalla de marcación * / var dial = document.createElement ('tabla'); dial.id = 'marcar'; para lazo para insertar las cuatro filas de la tabla de marcación con él. Luego, para cada fila, corre otro para lazo para sumar tres celdas por fila. Marcar cada celda con el 'dialDigit' clase. 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 los bucles anteriores calculan los dígitos que entran en las celdas de la tabla de marcación, los valores de cell.textContent Propiedad - de la siguiente manera: (columna + 1) + (filaNum * 3) / * primera fila * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * segunda fila * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- y + que se utilizan en formatos de número de teléfono para identificar códigos regionales y el dígito 0.Si declaración al interior para lazo. 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 Contenedor HTML que creó en el Paso 1 utilizando dos métodos DOM:querySelector () método para selecciona el contenedorañadir Niño() método para añadir la pantalla de marcación - celebrado en el marcar variable - al contenedor document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Estilo de la pantalla de marcación
selección de usuario: ninguna; propiedad a #marcar envase de modo que mientras el usuario está haciendo clic en los dígitos, el texto no será seleccionado por el cursor. #dial ancho: 200px; altura: 200px; colapso de la frontera: colapso; text-align: center; posición: relativa; -ms-user-select: ninguno; -webkit-user-select: none; -moz-user-select: none; selección de usuario: ninguna; color: # 000; caja de sombra: 0 0 6px # 999; .dialDigit border: 1px solid #fff; cursor: puntero; color de fondo: rgba (255,228,142, .7);
4. Mostrar la pantalla de marcación al hacer clic
visibilidad: oculta; regla de estilo para #marcar en el CSS anterior a ocultar la pantalla de marcación por defecto. solo se mostrará cuando el usuario haga clic en el icono de marcación.querySelector () y el addEventListener () metodos El último adjunta un evento de clic al icono de marcar y llama a la costumbre toggleDial () función.toggleDial () función cambia la visibilidad de la pantalla de marcación de oculto a visible, y de vuelta. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'visible': 'hidden'; 5. Agrega la funcionalidad
marque el número() función anexa los dígitos uno por uno al contenido del texto propiedad del campo de entrada marcado con el #telefono no identificador. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); para (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :flotar y :activo (cuando el usuario hace clic en él) declara. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Añadir Validación de Expresión Regular
+ personaje, y aceptar el - personaje después.
modelo variable. También crea una personalizada validar() Función que comprueba si el número de teléfono introducido. cumple con la expresión regular, y si es Al menos 8 caracteres de longitud.validar() la función necesita Dar opinion al usuario. patrón = nuevo RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); función validar (txt) // al menos 8 caracteres para un número de teléfono 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. Realizar la Validación.
validar() funciones necesita ser llamado Para realizar la validación. Llámalo desde el marque el número() función que creó en el Paso 5 para validar el valor del telefono no variable.Si declaración. function dialNumber () var val = phoneNo.value + this.textContent; // caracteres máximos permitidos, 15 si (val.length> 15) devuelve falso; validar (val); phoneNo.value = val;
