Я использую Javascript для автоматического добавления дефисов к номеру телефона. Необходимо изменить это, чтобы автоматически удалять дефисы, или найти новое исправление

Я нашел очень полезную часть JS из другого потока для автоматического переноса чисел, но побочным продуктом этого является то, что теперь они ввели 10 номеров (номер телефона в США), но если они хотят удалить и изменить его, у них будет также удалить дефисы. Я понимаю, что это не так уж важно, но меня это раздражает, и я хотел найти лучшее решение.

Приходит на ум несколько разных вариантов, просто не уверен, что возможно:

1. Добавьте/измените мой код, чтобы при удалении он автоматически удалял дефисы при удалении своих номеров, чтобы они нажимали клавишу Backspace только 10 раз вместо 12.

2. Имейте вид дефисов в текстовом поле, но на самом деле они не находятся в области ввода текста... так же, как, так сказать, «фоновое изображение». Я попытался сделать это с фоновым SVG для текстовой области, но мне не удалось решить проблему автоматического размещения телефонного номера вокруг фальшивых дефисов. Что касается этого возможного решения, я согласен с тем, что они будут там все время, даже до того, как что-то будет набрано, или появятся, как только они начнут набирать номер.

Я долго искал, но не нашел ничего из того, что мне нужно. Я уверен, что тема уже существует, но я просто не искал нужные термины. если у кого-то есть ссылка на один, даже это было бы удивительно.

Вот мой существующий код... надеюсь, это то, что я могу сделать, добавив что-то простое. Любая помощь приветствуется.

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