npm 包 @os33/intl-tel-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

本文主要介绍了 npm 包 @os33/intl-tel-input 的使用方法，该包是一款基于 jQuery 和 Google libphonenumber 的国际电话输入框插件，它能够为用户提供国际标准电话格式和智能地自动填写国际区号。

安装

通过 npm 安装 @os33/intl-tel-input：

npm install @os33/intl-tel-input

使用

HTML

在 HTML 中添加 input 元素并设置 id 和 name：

<label for="phone">Phone: </label>
<input id="phone" name="phone" type="tel">

JS

导入 jQuery 和 @os33/intl-tel-input，然后为 input 元素添加插件：

import $ from 'jquery';
import '@os33/intl-tel-input';

$('#phone').intlTelInput();

CSS

导入样式表：

@import '~@os33/intl-tel-input/build/css/intlTelInput.css';

获取号码信息

插件会在 input 元素上添加一个 intlTelInput 对象，该对象包含了相关信息，可以使用 getNumber() 方法获取号码信息：

const phoneInput = $('#phone');
const phoneInfo = phoneInput.intlTelInput('getNumber');

console.log(phoneInfo); // '+86 138 8888 8888'

设置默认国家和区号

可以使用 setDefaultCountry() 方法设置默认国家：

const phoneInput = $('#phone');
phoneInput.intlTelInput('setDefaultCountry', 'jp'); // 设置日本为默认国家

可以使用 setNumber() 方法设置默认国家和区号：

const phoneInput = $('#phone');
phoneInput.intlTelInput('setNumber', '+81 123456789'); // 设置日本(+81)的电话号码

事件

插件包含许多有用的事件可以使用：

countrychange: 当用户切换选中的国家时触发，可以使用 getCurrentCountryData() 方法获取当前国家的信息。

const phoneInput = $('#phone');
phoneInput.on('countrychange', function() {
  const currentCountryData = phoneInput.intlTelInput('getCurrentCountryData');
  console.log(currentCountryData); // {name: 'United States', iso2: 'us', dialCode: '1'}
});

validation: 当输入框失去焦点时触发，该事件用于验证电话号码的有效性。

const phoneInput = $('#phone');
phoneInput.on('validation', function() {
  if (phoneInput.intlTelInput('isValidNumber')) {
    console.log('Valid number');
  } else {
    console.log('Invalid number');
  }
});

更多事件详情请参考文档。

结语

使用 @os33/intl-tel-input 插件可以为用户提供更加智能地电话号码输入体验，本文介绍了基本的使用方法和常用事件，能够帮助开发者更好地掌握该插件的使用技巧。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005587681e8991b448d5b52