Recabamos en el mundo on line para de esta forma regalarte la respuesta a tu dilema, si continúas con alguna difcultad puedes dejarnos tu inquietud y te contestaremos porque estamos para ayudarte.
Solución:
Nueva respuesta ES6
Todavía puede hacer esto usando un JavaScript simple.
HTML
JavaScript (ES6)
const isNumericInput = (event) => ;
const isModifierKey = (event) => ;
const enforceFormat = (event) =>
// Input must be of a valid number format or a modifier key, and not longer than ten digits
if(!isNumericInput(event) && !isModifierKey(event))
event.preventDefault();
;
const formatToPhone = (event) =>
if(isModifierKey(event)) return;
// I am lazy and don't like to type things more than once
const target = event.target;
const input = target.value.replace(/D/g,'').substring(0,10); // First ten digits of input only
const areaCode = input.substring(0,3);
const middle = input.substring(3,6);
const last = input.substring(6,10);
if(input.length > 6)target.value = `($areaCode) $middle - $last`;
else if(input.length > 3)target.value = `($areaCode) $middle`;
else if(input.length > 0)target.value = `($areaCode`;
;
const inputElement = document.getElementById('phoneNumber');
inputElement.addEventListener('keydown',enforceFormat);
inputElement.addEventListener('keyup',formatToPhone);
Y si quieres jugar con él:
https://jsfiddle.net/rafj3md0/
Descargo de responsabilidad:
Vale la pena señalar que esto se vuelve un poco extraño si intenta modificar la mitad del número debido a la forma en que los navegadores manejan la ubicación del símbolo de intercalación después de establecer el valor de un elemento. Resolver ese problema es factible, pero requeriría más tiempo del que tengo ahora, y hay bibliotecas que manejan cosas como esa.
Antigua respuesta ES5
Puede hacer esto usando una función rápida de javascript.
Si su HTML se parece a:
Su función de JavaScript puede ser simplemente:
// A function to format text to look like a phone number
function phoneFormat(input)
// Strip all characters from the input except digits
input = input.replace(/D/g,'');
// Trim the remaining input to ten characters, to preserve phone number format
input = input.substring(0,10);
// Based upon the length of the string, we add formatting as necessary
var size = input.length;
if(size == 0)
input = input;
else if(size < 4)
input = '('+input;
else if(size < 7)
input = '('+input.substring(0,3)+') '+input.substring(3,6);
else
input = '('+input.substring(0,3)+') '+input.substring(3,6)+' - '+input.substring(6,10);
return input;
Por supuesto, necesitará un detector de eventos:
document.getElementById('phoneNumber').addEventListener('keyup',function(evt)
var phoneNumber = document.getElementById('phoneNumber');
var charCode = (evt.which) ? evt.which : evt.keyCode;
phoneNumber.value = phoneFormat(phoneNumber.value);
);
Y a menos que esté de acuerdo con almacenar números de teléfono como cadenas formateadas (no lo recomiendo), querrá eliminar los caracteres no numéricos antes de enviar el valor con algo como:document.getElementById('phoneNumber').value.replace(/D/g,'');
Si desea ver esto en acción con el filtrado de entrada adicional, consulte este violín:
http://jsfiddle.net/rm9vg16m/
// Format the phone number as the user types it
document.getElementById('phoneNumber').addEventListener('keyup', function(evt)
var phoneNumber = document.getElementById('phoneNumber');
var charCode = (evt.which) ? evt.which : evt.keyCode;
phoneNumber.value = phoneFormat(phoneNumber.value);
);
// We need to manually format the phone number on page load
document.getElementById('phoneNumber').value = phoneFormat(document.getElementById('phoneNumber').value);
// A function to determine if the pressed key is an integer
function numberPressed(evt) charCode > 57) && (charCode < 36
// A function to format text to look like a phone number
function phoneFormat(input)
// Strip all characters from the input except digits
input = input.replace(/D/g, '');
// Trim the remaining input to ten characters, to preserve phone number format
input = input.substring(0, 10);
// Based upon the length of the string, we add formatting as necessary
var size = input.length;
if (size == 0)
input = input;
else if (size < 4)
input = '(' + input;
else if (size < 7)
input = '(' + input.substring(0, 3) + ') ' + input.substring(3, 6);
else
input = '(' + input.substring(0, 3) + ') ' + input.substring(3, 6) + ' - ' + input.substring(6, 10);
return input;
Enter a phone number here: No soy un fan de las cosas de corte. Aconsejaría usar .replace(), pasarle una expresión regular, capturar las partes del número de teléfono y luego enviarlo de la manera que lo necesita. Si puede leer expresiones regulares, es una forma programática mucho mejor de abordar el problema y es muy sencillo modificar el formato.
var phoneNumber = "1234567899";
var formatted = phoneNumber.replace(/(d1,2)(d1)?(d1,3)?(d1,4)?/, function(_, p1, p2, p3, p4)
let output = ""
if (p1) output = `($p1`;
if (p2) output += `$p2)`;
if (p3) output += ` $p3`
if (p4) output += ` $p4`
return output;
);
Nota: No he agregado ningún tipo de espacio en blanco, sin eliminación de números, pero también puede agregar eso.
Las respuestas anteriores no consideraron lo que sucede cuando un usuario comete un error y elimina algunos de los dígitos ingresados.
Para aquellos que buscan una solución jQuery, esto reformatea en cada evento keyup y elimina los caracteres adicionales y los espacios en blanco cuando el usuario está editando el número.
$('#phone').keyup(function(e)
var ph = this.value.replace(/D/g,'').substring(0,10);
// Backspace and Delete keys
var deleteKey = (e.keyCode == 8 );
Si te gustó nuestro trabajo, tienes la libertad de dejar una crónica acerca de qué le añadirías a este escrito.