[Malleys]

У вас же есть кнопка «Заказать звонок». После того, как пользователь ввёл номер телефона, предполагается, что он нажмёт на эту кнопку. У вас есть время, чтобы успеть вывести сообщение о том, на какой номер будет совершён вызов. Будет ли?

Вам ни в коем случае нельзя мешать пользователю вводить данные, лучше напишите позднее, что не так с вводом! Пользователь даже может не заметить, что какой-либо символ не был введён!

Можно ли сделать, что бы эта «8» игнорировалась (удалялась), если её вставляют в начало номера?

Trunk prefix может быть удалён (или заменён на «+7») при помощи регулярного выражения, после того, как номер прошёл проверку на действительность.

x (xxx  xx)x-xx-xx
x (xxx  x)xx-xx-xx
x (xxx)  xxx-xx-xx
^  ^^^  ^^^^^^^^^^
|  |||   местный
|  |||    номер
|  код
|  местности
|
код
страны

Как я понимаю, вам нужны исключительно номера абонентов из Российской Федерации (РФ), то номер телефона будет начинаться с «+7», но не с «+76» или с «+77» (Казахстан) и не с «+7840» или с «+7940» (Абхазия). Также вы можете указать рядом с полем ввода, что необходимо ввести номер, зарегистрированный в РФ, в таком случае могут быть разрешены номера без кода страны и с trunk prefix.

Местные номера в РФ могут состоять из 5, 6 или 7 цифр, но вам нужно, чтобы посетители вводили номер вместе с кодом местности. Национальный номер состоит из 10 цифр, в который входят код местности (3 цифры) и номер абонента (7 цифр).

мне почему-то кажется, что все телефоны на 9 начинаются... но если не прав, то поправьте. Как тогда быть?

Вы абсолютно правы в случае номеров мобильных телефонов в РФ!

что бы он позволял и 10 и 11 цифр ввести

В общем виде номер телефона в РФ можно представить так:

/^(?<country>\+?7|8|0)?(?<area>\d{3})(?<number>\d{7})$/

Группа area может быть выражена более точно так:

/^(?![89]40|97[0-1])(?:[349]\d{2}|8[1-7]\d)$/

https://en.wikipedia.org/wiki/Teleph...bers_in_Russia
https://en.wikipedia.org/wiki/List_o..._calling_codes

Вот пример целиком...

<form method="post">
	<input type="tel" autocomplete="tel" name="phone" placeholder="Ваш телефон∗" required>
	<p class="info"></p>
</form>

<script>
	
document.addEventListener("input", ({ target }) => {
	if(target.matches("input[type=tel]")) {
		const phone = target.value.trim()
			.replace(/[^\+\d]/g, "")
			.replace(/(.)\++/g, "$1");

		let match, message;

		if (match = phone.match(/^(\+?7|8|0)?((?![89]40|97[0-1])(?:[349]\d{2}|8[1-7]\d))(\d{7})$/)) {
			const [, country, area, number] = match;
			message = `
				<p>Мы позвоним вам по номеру +7 (${area}) ${number.replace(/(\d{2})(?=(?:\d{2})+$)/g, "$1-")}</p>
				<p>
					<button>Подтвердить</button>
					<button type="reset">Отменить</button>
				</p>
			`;
		} else {
			message = "Введён неверный номер!";
		}

		document.querySelector("input[type=tel] + .info").innerHTML = message;
		target.setCustomValidity(match ? "" : "Введён неверный номер");
	}
});

</script>

Пишите свой обработчик, задача которого просто проверять чтобы было 11 цифр в итоге и в начале 7 (с плюсом или нет, не важно) или 8

Достаточно 10 цифр, без плюса номер 7xxxxxxxxx нормализуется до +77xxxxxxxxx, но это номер не из РФ.

Я за любое разумное решение данной проблемы )

Самое зло которое бывает, при копировании и вставке номера будет исчезать какая-то цифра, что зачастую даже на крупных порталах, где штат разрабов присутствует.

В input[type=tel] всё нормально вставляется.
Вполне корректными могут быть такие запросы...
«9161234567»
«916-123-45-67»
«8916-1-234-567»
«+7 (916) 123-45-67»
«Тел.: +79161234567»
«позвоните на +79161234567»

Во всяком случае формы с побочными эффектами должны, по моему мнению, сообщать, что же в результате произойдёт!

P. S. Используйте атрибут autocomplete="tel" и type="tel" дабы пользователям не производить лишних телодвижении на не той клавиатуре.