Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

jQuery плагин для ввода телефонного номера

9 лет назад
16403 просмотра
JavaScript jQuery plugin Полезности

Зачем это нужно?

Плагин позволяет быстро создать стилизованный input для ввода телефонного номера. Вот такой:

Возможности

  • Авто форматирование номера телефона
  • Автоматический плейсхолдер в зависимости от выбранной страны
  • Навигация по странам стрелочками или поиск по мере ввода названия страны
  • При выборе страны код номер автоматически меняется без убийства самого номера
  • Авто-подбор страны при вводе цифр кода
  • Выпадающий список сам выберет где появиться (сверху или снизу) в зависимости от свободного места на экране
  • Много настроек для кастомизации под себя
  • Авто определение страны пользователя и подстановка соответствующего кода
  • Не ушатывает дизайн самого инпута

Недостатки

  • "Без ничего" весит около 100Кб + 200Кб файл utils.js (хотя можно вручную повыбрасывать лишнее)

Установка

Проще всего поставить через bower install intl-tel-input, но можно и скачать все с GitHub.

Так же не забываем про jQuery. В примерах везде 1.9.1, но здесь работает на 1.8 вполне себе нормально.

После подключения скрипта плагина и стилей, вызываем:

$("#mobile-number").intlTelInput();

Голый вызов, скорее всего, вас не устроит, т.к. не будет форматирования, да и заточено все под америкосов. Лучше сделать так:

$("#mobile-number").intlTelInput({
    utilsScript:'/path/to/utils.js',
    defaultCountry: 'auto',
    preferredCountries: ['ru']
});

Огромное количество настроек описано на гитхабе. В основном и так все понятно, поэтому переводить не буду, но если кому-то очень захочется, отпишитесь в комментариях, переведу.

Что еще почитать