Gem "rails-intl-tel-input"

Giới thiệu

Gem "rails-intl-tel-input" là một gem hỗ trợ cho việc nhập input xác thực mã số điện thoại theo quốc gia và cho biết định dạng chung của số điện thoại của mỗi quốc gia.

Installation

Add vào Gemfile:

gem "rails-intl-tel-input"

Chạy

$ bundle install

Hoặc

$ gem install intl-tel-input-rails

Cách Dùng

Add vào file main javascript:

//= require intlTelInput

file main css:

 *= require intlTelInput

Bây giờ bạn tạo một form để tạo input:

<%=form_for :user do |f| %>
    <%= f.intl_tel_input(:phone_number, {allowDropdown: true}, {class: "id_of_your_input"}) %>
<% end %>

Ở đây là mặc định sẽ là mã số điện thoại quốc gia sẽ là Mỹ và Anh sẽ xuất hiện đầu tiên. Nên giờ chúng ta sẽ thêm một chút javascript để có thể khởi tạo một số plugin cần thiết. Ví dụ

<script type="text/javascript">
  $(".id_of_your_input").intlTelInput({
      formatOnInit: true,
      separateDialCode: true,
      preferredCountries: ['vn', 'jp'],
      utilsScript: "assets/libphonenumber/utils.js"
  });
</script>


Như hình dưới chúng ta có thể đưa mã vùng Việt Nam và Nhật Bản lên đầu tiên.

Giới thiệu thêm về một số option trong gem:

allowDropdown:
Type: Boolean, Default: true
Cho phép được click mũi tên thả xuống cho chúng ta lựa chọn bằng việc kéo thả. Và hiển thị quốc kỳ khi chọn thay vì nhập mã vùng trước số điện thoại để hiển thị quốc kỳ như trạng thái.
nationalMode
Type: Boolean, Default: true
Cho phép nhập số quốc gia và sau đó chuyển đổi nó sang định dạng quốc tế bằng phương thức công khai getNumber - ví dụ
separateDialCode
Type: Boolean, Default: false
Hiển thị mã quốc gia bên cạnh quốc kỳ để không cần phải nhập mã số điện thoại quốc gia nữa.

preferredCountries:
Type: Array, Default: ["us", "gb"]
Chỉ định mã quốc gia hiển thị ở đầu danh sách.

onlyCountries
Type: Array, Default: undefined
Trong danh sách dropdown, chỉ hiển thị các quốc gia chỉ định - ví dụ

excludeCountries
Type: Array, Default: undefined
Trong danh sách dropdown, hiển thị tất cả các quốc gia trừ những quốc gia bạn chỉ định ở đây.

Ở trên mình chỉ giới thiệu một số option phù hợp hay dùng để các bạn có thể thiết lập thêm khi dùng Gem "rails-intl-tel-input". Ngoài ra còn có một số option khác, các bạn có thể đọc thêm ở đây https://github.com/jackocnr/intl-tel-input

Nguồn

https://github.com/jackocnr/intl-tel-input
https://github.com/emn178/rails-intl-tel-input/blob/master/README.md