Encontré un poco de JS muy útil de otro hilo para dividir automáticamente los números, pero un subproducto de eso es que ahora han ingresado 10 números (número de teléfono de EE. UU.), pero si quieren eliminarlo y cambiarlo, tendrán para eliminar los guiones también. Me doy cuenta de que esto no es un gran problema, pero me molesta y quería encontrar una mejor solución.

Se me ocurren un par de opciones diferentes, pero no estoy seguro de qué es posible:

1. Agregue/modifique mi código para que, a medida que eliminan, elimine automáticamente los guiones a medida que eliminan sus números, por lo que solo presionan la tecla de retroceso 10 veces en lugar de 12.

2. Tienen la apariencia de guiones en el cuadro de texto, pero en realidad no están en el área de entrada de texto... como una "imagen de fondo", por así decirlo. Intenté hacer esto con un SVG de fondo para el área de texto, pero no pude resolver el problema de espaciar automáticamente el número de teléfono alrededor de los guiones falsos. En cuanto a esta posible solución, estoy de acuerdo con que estén allí todo el tiempo, incluso antes de que se escriba algo, o que aparezcan una vez que comiencen a escribir el número.

He buscado mucho pero no he encontrado nada para lo que necesito. Estoy seguro de que ya existe un hilo, pero no he buscado los términos correctos. si alguien tiene un enlace a uno, incluso eso sería increíble.

Aquí está mi código existente... espero que esto sea algo que pueda lograr agregando algo simple. Cualquier ayuda es muy apreciada.

 $('#phone').keyup(function(){ $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3')) });