Как сделать интернациональную маску для input[type='tel']?

Нужно сделать интернациональную маску для ввода телефона.
Есть решения на jquery. Но нужно на чистом js или vue.js (последний - это вообще идеальный вариант).
Пытаюсь использовать https://github.com/MitrophD/vue-phone-input не получается завести.
Есть рабочие альтернативы данному компоненту?
  • Вопрос задан
  • 13989 просмотров
Решения вопроса 2
Использую https://github.com/RobinHerbots/Inputmask
С vue - в виде директивы.
Ответ написан
mQm
@mQm
https://medium.com/@gearmobile
Такое есть еще - https://vuejs-tips.github.io/vue-the-mask/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Exploding
@Exploding
wtf?
А "интернациональная" маска это какая? Каким требованиям она должна отвечать и что именно под "маской" подразумевается?
----------------------------
Ну и в принципе не дожидаясь ответа, т.к. он все равно никак не повлияет на дальнейший текст:
Как выше сказал Philipp - не ограничивайте ввод ибо маска хороша когда известна наверняка, а поди знай какая она у той страны/региона/города которого нет в той мега-библиотеке форматов телефонов, которую вы найдете и подключите чтобы правильный inputMask задать.
Я бы наверно сделал так:

Взял бы флаг, в смысле спрайт и css-ку к нему.

Получил данные о посетителе, типа такого (на клиенте!):
var request = new XMLHttpRequest();
request.open('GET', 'http://api.sypexgeo.net/json', true);

request.onload = function() {
  if (request.status == 200) {
    var data = JSON.parse(request.responseText),
		telCode = "+"+data.country.phone;
		console.log(telCode); // +380 например
  } else {
		//тут сами выкручивайтесь:)))
  }
};
request.send();


Флаг есть, код есть, еще в придачу хлама всякого, на ваше усмотрение, ну и сам инпут:
<input type="tel" placeholder="+380____________" required pattern="+[0-9()-.^+\/*%^]">

Где "+380" - код что из json добыли
Такой проверки должно хватить и вроде норм еще и на вид (если сверстаете ровно)))))
Проверять то все равно потом будете уже нормально, это так, для безруких хитрецов))
Ответ написан
@PerfectPixel
Плагин для jquery https://github.com/jackocnr/intl-tel-input
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы