Чтобы сделать поле для номера, в котором код страны не будет стираться, можно использовать различные подходы. Вот некоторые из них:
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; }
В зависимости от ваших особенных требований и дизайна, вы можете выбрать любой из приведенных выше подходов или использовать их комбинацию.