Una editora de libros tiene en su sitio una página de hable con nosotros para atender mejor a sus clientes. En esta página se creó un formulario con nombre, dirección y teléfono. El problema es que, el campo de teléfono está sin formato permitiendo que el cliente ingrese los números que quiere. Con eso el campo puede recibir un número como:
Y sería difícil saber si ese número es un teléfono fijo o un móvil. Es decir, es confuso ya sea para el cliente que está ingresando el teléfono en el campo, o para el backend que recibe esta información. El formato esperado para teléfonos móviles, por ejemplo sería:
Entonces, lo que vamos a hacer es encontrar una manera de solucionar nuestro problema y llegar al resultado esperado utilizando JavaScript.
El tramo del html donde colocamos el número de teléfono está de la siguiente manera:
<div>
<input type="text" placeholder="9999-9999 o 9999-99999" />
</div>
Lo que queremos ahora es capturar el número digitado por el cliente, entonces vamos a crear una variable para que nos ayude en esta tarea:
textoActual
es el responsable por capturar el número del teléfono.Vamos a aprovechar y encapsular nuestro código dentro de una función, pensando en facilitar la legibilidad y futuros mantenimientos en nuestro código.
function mascaraDeTelefono( teléfono ){
const textoActual = telefono.value;
}
Ahora ya tenemos el value
del input, falta encontrar una manera de decir si el número de teléfono es fijo o móvil.
Desarrollaremos una lógica que consistirá en un if else
que confirmará el tipo de teléfono y luego pasaremos este número al variable telefono
ya formateado.
function mascaraDeTelefono(telefono){
const textoActual = telefono.value;
const isCelular = textoActual.length === 9;
let textoAjustado;
if(isCelular) {
// hace alguna cosa
} else {
// hace alguna cosa
}
telefono.value = textoAjustado;
}
Ahora lo que queremos es una manera de formatear estos números en el siguiente estándar: XXXXX-XXXX
para móvil y XXXX-XXXX
para teléfono fijo.
Primero eliminaremos el guión del número ingresado, utilizando el método replace que devolverá una nueva string, con un nuevo estándar preestablecido.
function eliminarGuion(teléfono) {
const textoActual = teléfono.value;
const textoAjustado = textoActual.replace(/\-/g, '');
telefono.value = textoAjustado;
}
Como el input que capturamos es una string, y ya eliminamos el guión del número, una posible solución para nuestro problema de formateo es contar cuantos caracteres tienen esta string y enseguida cortarla en dos partes - una antes y otra después del guión. Una manera de cortar la string es por el método slice.
El slice
nos permite manipular arrays y strings (son arrays de caracteres), devolviendo solamente el tramo que elegimos.
Cómo dividiremos la secuencia de números en dos partes, creamos dos variables que recibirán estas partes y otra que será responsable por formatear los números:
let textoAjustado;
if(isCelular) {
const parte1 = textoActual.slice(0,5);
const parte2 = textoActual.slice(5,9);
textoAjustado = `${parte1}-${parte2}`
} else {
const parte1 = textoActual.slice(0,4);
const parte2 = textoActual.slice(4,8);
textoAjustado = `${parte1}-${parte2}`
}
telefono.value = textoAjustado;
}
Con el código listo tenemos el siguiente resultado:
¡Excelente! Conseguimos formatear como queríamos. Ahora, con lógica lista necesitamos encontrar una manera de disparar esta función todas las veces que el cliente haya ingresado el teléfono en el campo.
El evento blur se activa cuando un elemento pierde el foco, es decir, después que el cliente haya ingresado el teléfono y pulse en otro campo, el evento onblur se dispara accionando nuestra función y realizando el formateo del teléfono.
Pasamos el this
como parámetro de la función para decir que el parámetro está dentro del contexto de nuestra función.
<div>
<input type="text" onblur="mascaraDeTelefono(this)"
placeholder="9999-9999 o 9999-99999"/>
</div>
Con la función lista, la uniremos al evento onfocus que será responsable por disparar nuestra función, mientras el campo del input
esté en enfocado.
<div>
<input type="text" onblur="mascaraDeTelefono(this)"
placeholder="9999-9999 o 9999-99999"
onfocus="tiraHifen(this)" />
</div>
Como vimos, las validaciones son siempre problemas complejos en virtud de las innúmeras posibilidades de interacción del usuario.
Otra posibilidad de hacer nuestro formateo sería a través de las expresiones regulares, que no son más que combinaciones de caracteres que utilizamos para seleccionar otros caracteres en strings.
En nuestro caso, podríamos utilizar la siguiente expresión regular para formatear el número del móvil, por ejemplo:
let textoAjustado;
if(isCelular) {
textoAjustado = textoActual.replace(/(\d{5})(\d{4})/,
function( regex, arg1, arg2) {
return arg1 + '-' + arg2 ;
});
telefono.value = textoAjustado;
}
Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Puedes realizar el pago de tus planes en moneda local en los siguientes países:
País | |||||||
---|---|---|---|---|---|---|---|
Plan Semestral |
486.67
BOB |
66282.00
CLP |
290982.28
COP |
65.90
USD |
266.52
PEN |
1404.01
MXN |
2820.00
UYU |
Plan Anual |
737.76
BOB |
100479.09
CLP |
441109.70
COP |
99.90
USD |
404.03
PEN |
2128.39
MXN |
4274.94
UYU |
Acceso a todos
los cursos
Estudia las 24 horas,
dónde y cuándo quieras
Nuevos cursos
cada semana