Как сделать в поле для номера, в котором код страны не будет стираться?

Чтобы сделать поле для номера, в котором код страны не будет стираться, можно использовать различные подходы. Вот некоторые из них:

1. Добавить отдельное поле для кода страны: Вместо того, чтобы использовать одно поле для ввода номера телефона с кодом страны внутри, можно добавить два отдельных поля - одно для кода страны, другое - для самого номера телефона. Таким образом, код страны будет оставаться неизменным, а пользователи смогут вводить только номер телефона.

<div class="phone-input">
  <input type="text" id="country-code" name="country-code" value="+1" readonly>
  <input type="tel" id="phone-number" name="phone-number">
</div>

2. Использовать позиционирование элементов: Еще одним способом является использование позиционирования элементов с помощью CSS. Например, можно добавить псевдоэлемент before к полю ввода номера и отобразить в нем код страны, используя абсолютное позиционирование.

.phone-input {
  position: relative;
}

.phone-input:before {
  content: "+1";
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.phone-input input[type="text"] {
  padding-left: 30px; /* учитываем ширину кода страны */
}

3. Использовать заглушку для кода страны: Если вы хотите, чтобы код страны показывался только при отсутствии значения в поле номера, можно использовать атрибут placeholder и установить в него значение кода страны. Однако при вводе самого номера это значение будет заменено.

<input type="tel" id="phone-number" name="phone-number" placeholder="+1">

input::placeholder {
  color: gray;
}

В зависимости от ваших особенных требований и дизайна, вы можете выбрать любой из приведенных выше подходов или использовать их комбинацию.