Перейти к содержимому


Маска ввода номера телефона с разными Странами


  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 metry

metry

    Активный участник

  • Модераторы
  • 884 сообщений

Отправлено 13 Октябрь 2023 - 16:13

Для внесения изменений зайдите в раздел Сайт-->Редактор шаблонов-->Быстрый заказ и найдите:

				<div class="fields">
				  <div class="input-box inputPhone_icon">
					<input id="sites_client_phone" name="form[contact][phone]" placeholder="Номер телефона*" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" required class="required input" type="text"/>
				  </div>
				</div>

замените на:

				<div class="fields">
				  <div class="input-box inputPhone_icon">
				<select id="country" class="form-control">
				  <option value="uz">+998</option>
				  <option value="tdj">+992</option>
				  <option value="kz">+7</option>
				</select>
					<input id="sites_client_phone" name="form[contact][phone]" placeholder="Номер телефона*" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" required class="required input" type="text"/>
				  </div>
				</div>
			   
				<script>
				jQuery (function ($) {
				  $(function() {
					function maskPhone() {
					  var country = $('#country option:selected').val();
					  $.mask.definitions['9'] = false;
					  $.mask.definitions['#'] = "[0-9]";
					  switch (country) {
						case "uz":
						  $("#callback_phone_header, #sites_client_phone ").mask("+998(###) ###-##-##");
						  break;
						case "tdj":
						  $("#callback_phone_header, #sites_client_phone").mask("+992(###) ###-##-##");
						  break;
						case "kz":
						  $("#callback_phone_header, #sites_client_phone").mask("+7(###) ###-##-##");
						  break;
					  }
					}
					maskPhone();
					$('#country').change(function() {
					  maskPhone();
					});
				  });
				});
				</script>


далее зайдите в раздел Сайт-->Редактор шаблонов-->main.css и в самый конец кода добавьте:

select#country {width: 70px;padding: 5px;}
.formfast .order_grid .account .fields-grid .fields .input-box.inputPhone_icon { display: flex;}


#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 06 Январь 2024 - 10:30

Так же можно использовать вариант без переключения страны в выпадающем списке через универсальную маску.
Код будет выглядеть так:
	$( document ).ready(function() {
	  // Маска
	  $.mask.definitions['h']='[12345679]';
	  $.mask.definitions['~']='[1234567890+ ]';
	  $(".callback_phone, #feedback_phone, #sites_client_phone").mask("+~~~ (h99)-999-99?99");
	});

Им можно заменить тот код, который уже есть в шаблоне, либо добавить в шаблоне HTML.
При этом выполнять инструкцию выше не нужно.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных