andr-04 / inputmask-multi

http://andr-04.github.com/inputmask-multi/
253 stars 106 forks source link

intl-tel-input #27

Open epexa opened 7 years ago

epexa commented 7 years ago

Привет!

Возможно ли использовать вашу библиотеку с International Telephone Input ?

andr-04 commented 7 years ago

Привет.

Не пробовал. Но кажется, он просто выводит флаг слева, а само поле ввода не меняется -- т.е. конфликтовать не должно.

Попробуй. Если что-то получится напиши.

epexa commented 7 years ago

@andr-04 Нет, там сложная библиотека работающая с libphonenumber, думаю так просто не получится заставить вашу работать с ней... Возможно вы бы смогли адаптировать свою... (чтобы с его либы получать формат выбранной страны). Раньше у него была такая возможность, но из-за различных проблем он убрал эту функцию.

andr-04 commented 7 years ago

Его плагин, если смотреть на текущее демо, вообще не изменяет маску ввода -- по сути, он только префикс (код страны) меняет. В этой связи мне кажется, что симбиоз с моим плагином всё-таки возможен.

А за libphonenumber спасибо. Что-то никогда не попадалась на глаза, а вещь достойная!

epexa commented 7 years ago

@andr-04 Он взял libphonenumber и реализовал очень удобные вещи! Посмотрите пример Lookup user's country, National Mode, Validation ! Особенно полезен National Mode, когда номер можно вводить разными вариантами, например РФ:

  1. в международном формате, т.е. если россия начинается на +7. Пример: +79126569878.
  2. в международном формате без знака +, т.е. если россия начинается на 7. Пример: 79126569878.
  3. в обычном формате, т.е. если россия начинается на 8. Пример: 89126569878.
  4. в местном формате, т.е. без цифры страны, сразу начиная с кода города. Пример: 9126569878. А ещё в любом формате можно использовать скобки и тире. Например в местном формате можно так: (912) 656-98-78.

Какой вариант использовать не важно, всё равно будет автоматически преобразован в международный формат: +7 912 656-98-78

Можно вводить любую страну выбрав просто её в списке или вводить номер в международном формате, страна определится автоматически.

Вообщем библиотека по сути реализовывает так, как сделано в Google регистрации.

Единственного чего не хватает, это автоформатирования при вводе, с 8.0.0 эту функцию убрал((

epexa commented 7 years ago

До ввода: Заявка на просмотр от агента.png После: Заявка на просмотр от агента2.png Выбор страны: Заявка на просмотр от агента3.png

andr-04 commented 7 years ago

Да, я посмотрел демо из libphonenumber -- там есть демо "всё в одном", я понял возможности. Выглядит достойно!

Мой же плагин делался как более универсальный, без затачивания под номера телефонов. С учётом такого многообразия вариантов отображения в "привычном" виде несовсем понятно идеологически как это может сочетаться с моим плагином. Т.е. в режиме "международного" номера симбиоз обоих плагинов, кажется, возможен: поведение каждого из них будет видно.

Наверное хорошо было бы увидеть как это было сделано раньше, когда маска телефона ещё была в этом плагине.

epexa commented 7 years ago

@andr-04 Версию 7.1.1 посмотрите.

noxxer commented 7 years ago

Привет!

Тоже ищу возможность реализовать автоформатирование.

Действующая реализация есть в комплексе с коммерческим валидатором:

http://formvalidation.io/examples/validating-international-phone-numbers/

Пока думаю сделать как тут (форматирование ): https://github.com/jackocnr/intl-tel-input/issues/367#issuecomment-184166488

Мои эксперименты: `

Test Int-phone-num

`

var $last_validate = false; $('#welcomeFormId').find('[name="phone"]') .intlTelInput({ utilsScript: '/js/utils.js', preferredCountries: ['ru'], formatOnInit: true }); $("#welcomeFormId").find('[name="phone"]').on('keyup', function(){ var telInput = $(this), value = telInput.val().trim(), number = telInput.intlTelInput("getNumber"), isValid = telInput.intlTelInput("isValidNumber"), res0 = intlTelInputUtils.formatNumber(number), res1 = intlTelInputUtils.formatNumber(number,telInput.intlTelInput("getSelectedCountryData").iso2), res2 = intlTelInputUtils.formatNumber(number,null,intlTelInputUtils.numberFormat.INTERNATIONAL), res3 = intlTelInputUtils.formatNumber(number,telInput.intlTelInput("getSelectedCountryData").iso2,intlTelInputUtils.numberFormat.INTERNATIONAL), res4 = intlTelInputUtils.formatNumber(number,null,intlTelInputUtils.numberFormat.NATIONAL), res5 = intlTelInputUtils.formatNumber(number,telInput.intlTelInput("getSelectedCountryData").iso2,intlTelInputUtils.numberFormat.NATIONAL); console.log('value: ' + value); console.log('isValid: ' + isValid); console.log('res0: ' + res0); console.log('res1: ' + res1); console.log('res2: ' + res2); console.log('res3: ' + res3); console.log('res4: ' + res4); console.log('res5: ' + res5); if (isValid || $last_validate) { telInput.val(res5); telInput.closest('.form-group').removeClass('has-error').addClass('has-success'); } else { telInput.closest('.form-group').removeClass('has-success').addClass('has-error'); } $last_validate = isValid; });

Без $last_validate не корректно обрабатывает некоторые коды региона если вводить с 8: 83431112233 (последний знак уже не даст поставить)

Я в frontend не специалист, если удастся сделать лучше - напишите пожалуйста!

epexa commented 7 years ago

@noxxer

Действующая реализация есть в комплексе с коммерческим валидатором:

http://formvalidation.io/examples/validating-international-phone-numbers/

Там просто взят плагин International Telephone Input ниже 8 версии! Вот например в 7.1.1 есть автоформатирование!

@andr-04 Версию 7.1.1 посмотрите.

randomsuffer commented 7 years ago

Так что, получилось объединить с intl-tel-input? Я использую inputmask-multi, но хочу прикрутить слева флажок.

epexa commented 7 years ago

@randomsuffer так и не попробывал. а какой флажок (флаги страны и так же есть) ?

randomsuffer commented 7 years ago

@Epexa так флажки же только в intl-tel-input. Я как раз это и хотел объединить. Или в inputmask-multi тоже есть флажки?

epexa commented 7 years ago

@randomsuffer попутал, нету. Если получится объединить, напишите тут.