intl tel input

국제전화 입력

뉴스: 이제 자체 Vue 구성요소가 생겼습니다!

뉴스: 이제 우리만의 React 컴포넌트가 생겼습니다! Storybook에서 플레이해 보세요.

?️ 뉴스: 이제 30개 이상의 언어로 번역을 제공합니다! 실제로 작동하는 모습을 확인하세요.

국제 전화 입력은 국제 전화 번호를 입력하고 확인하기 위한 JavaScript 플러그인입니다. 일반 입력 필드를 사용하고, 검색 가능한 국가 드롭다운을 추가하고, 사용자 국가를 자동 감지하고, 관련 자리 표시자 번호를 표시하고, 입력에 따라 번호 형식을 지정하고, 포괄적인 유효성 검사 방법을 제공합니다. React 및 Vue 구성 요소도 포함되어 있습니다.

플러그인이 도움이 된다면 프로젝트 지원을 고려해 보세요.

후원자:

Twilio의 API를 사용하여 전화 확인, SMS 2FA, 약속 알림, 마케팅 알림 등을 구축하세요. 우리는 당신이 무엇을 구축할지 기대하고 있습니다.

목차

• 반응 및 Vue 구성 요소
• 데모 및 예
• 이동하는
• 특징
• 브라우저 호환성
• 시작하기
• 권장 사용법
• 초기화 옵션
• 인스턴스 메소드
• 정적 방법
• 이벤트
• 테마 / 다크 모드
• 번역
• 유틸리티 스크립트
• 유틸리티 스크립트 로드
• 문제 해결
• 기여
• 속성

반응 및 Vue 구성 요소

이제 일반 JavaScript 플러그인과 함께 React 및 Vue 구성 요소를 모두 제공합니다. 이 Readme는 JavaScript 플러그인용입니다. React 구성 요소 추가 정보 또는 Vue 구성 요소 추가 정보를 확인하세요.

데모 및 예

라이브 데모를 보고 다양한 옵션을 사용하는 방법에 대한 몇 가지 예를 볼 수 있습니다. 또는 프로젝트를 다운로드하고 브라우저에서 데모.html을 열어 직접 사용해 보세요.

이동하는

기본적으로 모바일 장치에서는 제한된 화면 공간을 더 잘 활용하기 위해 인라인 드롭다운 대신 전체 화면 팝업을 표시합니다. 이는 기본 <select> 요소의 작동 방식과 유사합니다. useFullscreenPopup 옵션을 사용하여 이 동작을 제어할 수 있습니다. 목록에서 국가를 선택하거나 측면의 회색 영역을 탭하여 팝업을 닫을 수 있습니다. 예제를 참조하세요(React 구성 요소 사용).

특징

• IP 조회를 사용하여 사용자의 현재 국가를 자동으로 선택합니다.
• 입력 자리 표시자를 선택한 국가의 예시 번호로 자동 설정합니다.
• 국가 이름을 입력하거나 위쪽/아래쪽 키를 사용하여 국가 드롭다운을 탐색하세요.
• 사용자 유형에 따라 숫자 형식을 자동으로 지정합니다.
• 선택적으로 숫자만 허용하고 최대 유효 길이로 숫자를 제한합니다.
• 사용자가 국가 번호를 입력하면 플러그인이 표준화된 전체 국제 번호를 제공합니다.
• 특정 오류 유형을 포함한 숫자 검증
• 고해상도 깃발 이미지
• ARIA 태그를 통해 접근성 제공
• Typescript 유형 정의가 포함됨
• CSS 변수를 재정의하여 스타일을 쉽게 사용자 정의
• React 및 Vue 구성요소도 포함됨
• 다양한 언어로 제공되는 국가 이름(등) 번역
• 사용자 정의를 위한 다양한 초기화 옵션과 상호 작용을 위한 인스턴스 메소드/이벤트

브라우저 호환성

크롬	파이어폭스	원정 여행	가장자리
✓	✓	v14+	✓

참고: 이제 모든 버전의 Windows에서 Internet Explorer가 더 이상 지원되지 않으므로 모든 버전의 Internet Explorer에 대한 지원이 중단되었습니다.

시작하기(CDN 사용)

1. CSS 추가

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " >

2. 플러그인 스크립트를 추가하고 입력 요소에서 초기화하세요.

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js " > </ script >
< script >
  const input = document . querySelector ( "#phone" ) ;
  window . intlTelInput ( input , {
    loadUtilsOnInit : "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" ,
  } ) ;
</ script > 

시작하기(Webpack과 같은 번들러 사용)

1. npm으로 설치: npm install intl-tel-input --save 또는 Yarn: yarn add intl-tel-input

2. CSS를 가져옵니다. import 'intl-tel-input/build/css/intlTelInput.css';

3. CSS 변수를 재정의하여 CSS에서 flags.webp 및 Globe.webp의 경로를 설정합니다.

. iti {
  --iti-path-flags-1x : url ( 'path/to/flags.webp' );
  --iti-path-flags-2x : url ( 'path/to/[email protected]' );
  --iti-path-globe-1x : url ( 'path/to/globe.webp' );
  --iti-path-globe-2x : url ( 'path/to/[email protected]' );
}

4. JS를 가져오고 입력 요소에서 플러그인을 초기화합니다.

 import intlTelInput from 'intl-tel-input' ;

const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
    loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ;

대부분의 번들러(예: Webpack, Vite 또는 Parcel)는 이를 확인하고 유틸리티 스크립트를 별도의 번들에 배치하고 필요할 때만 비동기식으로 로드합니다. 이것이 번들러에서 작동하지 않거나 다른 위치(예: CDN)에서 utils 모듈을 로드하려는 경우 loadUtilsOnInit 옵션을 문자열로 로드할 URL로 설정할 수 있습니다. 예를 들어:

 import intlTelInput from 'intl-tel-input' ;

const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
    loadUtilsOnInit : `https://cdn.jsdelivr.net/npm/intl-tel-input@ ${ intlTelInput . version } /build/js/utils.js` ;
} ) ; 

시작하기(번들러를 사용하지 않음)

1. 최신 릴리스를 다운로드하거나 npm을 사용하여 설치하는 것이 더 좋습니다.

2. 스타일시트 추가

 < link rel =" stylesheet " href =" path/to/intlTelInput.css " >

3. CSS 변수를 재정의하여 CSS에서 flags.webp 및 Globe.webp의 경로를 설정합니다.

. iti {
  --iti-path-flags-1x : url ( 'path/to/flags.webp' );
  --iti-path-flags-2x : url ( 'path/to/[email protected]' );
  --iti-path-globe-1x : url ( 'path/to/globe.webp' );
  --iti-path-globe-2x : url ( 'path/to/[email protected]' );
}

4. 플러그인 스크립트를 추가하고 입력 요소에서 초기화하세요.

 < script src =" path/to/intlTelInput.js " > </ script >
< script >
  const input = document . querySelector ( "#phone" ) ;
  window . intlTelInput ( input , {
    loadUtilsOnInit : "path/to/utils.js"
  } ) ;
</ script > 

권장 사용법

서식 지정 및 유효성 검사 등을 가능하게 하는 포함된 utils.js를 로드하는 것이 좋습니다. 그런 다음 플러그인은 항상 전체 국제 형식(예: "[phone]")의 숫자를 처리하고 그에 따라 변환하도록 구축됩니다. - nationalMode 또는 separateDialCode 인 경우에도 마찬가지입니다. 활성화되었습니다. 단순화를 위해 이 형식으로만 번호를 가져오고 저장하고 설정하는 것이 좋습니다. 그러면 전체 국제 번호에 국가 코드 정보가 포함되므로 국가 코드를 별도로 처리할 필요가 없습니다.

getNumber 사용하면 언제든지 전체 국제 전화번호(국가 코드 포함)를 얻을 수 있습니다. 그런 다음 해당 문자열 하나만 데이터베이스에 저장하면 됩니다(국가를 별도로 저장할 필요는 없음). 그런 다음 다음에 플러그인을 초기화할 때 입력에 해당 번호를 사용하면 자동으로 국가가 설정되고 지정한 옵션에 따라 형식이 지정됩니다(예: nationalMode 사용하면 국제 전화 코드가 제거되고 자동으로 국가 형식으로 번호가 표시됩니다).

사용자의 국가를 알고 있는 경우에는 initialCountry (예: 미국의 경우 "us" )로 설정할 수 있으며, 그렇지 않은 경우에는 ( geoIpLookup 옵션과 함께) initialCountry "auto" 로 설정하여 사용자의 국가를 확인하는 것이 좋습니다. IP 주소에 따른 국가 - 예를 참조하세요.

사용자의 언어를 알고 있는 경우 포함된 번역을 사용하여 국가 이름 등을 현지화할 수 있습니다. 예를 참조하세요.

초기화 옵션

플러그인을 초기화할 때 첫 번째 인수는 입력 요소이고 두 번째 인수는 원하는 초기화 옵션이 포함된 개체입니다. 자세한 내용은 아래에 설명되어 있습니다. 참고: 국가 코드를 사용하는 모든 옵션은 ISO 3166-1 alpha-2 코드여야 합니다.

허용드롭다운
유형: Boolean 기본값: true
드롭다운을 허용할지 여부입니다. 비활성화된 경우 드롭다운 화살표가 없으며 선택한 국가를 클릭할 수 없습니다. 또한 showFlags가 활성화된 경우 선택한 플래그는 단지 상태 표시일 뿐이므로 대신 오른쪽에 표시됩니다. separateDialCode 활성화된 경우 이 경우 사용자가 "+"를 입력할 때 드롭다운이 필요하므로 allowDropdown 이 강제로 true 로 설정됩니다. Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

자동 자리 표시자
유형: String 기본값: "polite"
입력의 자리 표시자를 선택한 국가의 예시 번호로 설정하고 국가가 변경되면 업데이트하세요. placeholderNumberType 옵션을 사용하여 숫자 유형을 지정할 수 있습니다. 기본적으로 "polite" 로 설정되어 있습니다. 즉, 입력에 아직 자리 표시자가 없는 경우에만 자리 표시자가 설정된다는 의미입니다. 기존 자리 표시자를 대체하는 "aggressive" 로 설정하거나 "off" 로 설정할 수도 있습니다. utils 스크립트를 로드해야 합니다.

컨테이너 클래스
유형: String 기본값: ""
(주입된) 래퍼 <div> 에 추가할 추가 클래스입니다.

국가순서
유형: Array 기본값: null
iso2 국가 코드 배열을 사용하여 국가 목록의 순서를 지정합니다. 생략된 국가는 지정된 국가 뒤에 표시됩니다. 예를 들어 countryOrder ["jp", "kr"] 로 설정하면 일본, 한국, 아프가니스탄, 알바니아, 알제리 등의 목록이 표시됩니다.

국가검색
유형: Boolean 기본값: true
사용자가 표시된 국가를 필터링할 수 있도록 드롭다운 상단에 검색 입력을 추가하세요.

맞춤자리 표시자
유형: Function 기본값: null
autoPlaceholder에 의해 생성된 자리 표시자를 변경합니다. 문자열을 반환해야 합니다.

 intlTelInput ( input , {
  customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
    return "e.g. " + selectedCountryPlaceholder ;
  } ,
} ) ;

드롭다운컨테이너
유형: Node 기본값: null
document.body 와 같은 노드가 필요합니다. 입력 옆에 국가 드롭다운 마크업을 배치하는 대신 이를 지정된 노드에 추가하면 JavaScript를 사용하여 입력 옆에 배치됩니다( position: fixed 사용). 이는 입력이 overflow: hidden 사용하여 컨테이너 내부에 있을 때 유용합니다. 스크롤로 인해 위치 지정이 중단되므로 window 스크롤 이벤트 시 드롭다운이 자동으로 닫힙니다.

제외국가
유형: Array 기본값: []
드롭다운에는 여기에서 지정한 국가를 제외한 모든 국가가 표시됩니다. Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

수정DropdownWidth
유형: Boolean 기본값: true
드롭다운 너비를 입력 너비로 수정합니다(가장 긴 국가 이름만큼 넓지 않음). Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

형식AsYouType
유형: Boolean 기본값: true
사용자가 입력하면 자동으로 숫자 형식이 지정됩니다. 사용자가 자신의 서식 문자를 입력하면 이 기능이 비활성화됩니다. utils 스크립트를 로드해야 합니다.

표시 시 형식
유형: Boolean 기본값: true
초기화하는 동안 및 setNumber 에서 입력 값의 형식을 nationalMode 옵션에 따라 지정합니다. utils 스크립트를 로드해야 합니다.

geoIp조회
유형: Function 기본값: null
initialCountry "auto" 로 설정하는 경우 이 옵션을 사용하여 IP 조회 서비스를 호출하여 사용자 위치를 가져온 다음 관련 국가 코드와 함께 success 콜백을 호출하는 사용자 정의 함수를 지정해야 합니다. 또한 플러그인을 인스턴스화할 때 Promise 객체가 promise 인스턴스 속성 아래에 반환되므로 iti.promise.then(...) 과 같은 작업을 수행하여 이와 같은 초기화 요청이 언제 완료되었는지 알 수 있습니다.

다음은 ipapi 서비스를 사용하는 예입니다.

 intlTelInput ( input , {
  initialCountry : "auto" ,
  geoIpLookup : function ( success , failure ) {
    fetch ( "https://ipapi.co/json" )
      . then ( function ( res ) { return res . json ( ) ; } )
      . then ( function ( data ) { success ( data . country_code ) ; } )
      . catch ( function ( ) { failure ( ) ; } ) ;
  }
} ) ;

오류 발생 시 failure 콜백을 호출해야 하므로 이 예제에서는 catch() 를 사용합니다. 팁: 반복 조회를 피하기 위해 결과를 쿠키에 저장하십시오!

숨겨진입력
유형: Function 기본값: null
전체 국제 전화번호와 선택한 국가 코드를 저장하기 위해 양식 내에 숨겨진 입력 필드를 생성할 수 있습니다. 주요 전화 입력의 이름을 인수로 받는 함수를 받아들입니다. 이 함수는 전화번호 및 국가 코드에 대한 숨겨진 입력 이름을 각각 지정하기 위해 phone 및 (선택적으로) country 속성이 포함된 개체를 반환해야 합니다. 이는 특히 nationalMode 가 활성화된 경우 전체 국제 전화번호와 국가 코드를 캡처하기 위해 비 Ajax 양식 제출에 유용합니다.

* 참고 : 이 기능을 사용하려면 가장 가까운 양식 요소에서 submit 이벤트를 수신하므로 입력이 <form> 요소 내에 있어야 합니다. 또한 내부적으로 getNumber 사용하기 때문에 먼저 utils 스크립트를 로드해야 하고 두 번째로 유효한 숫자가 필요하므로 양식 제출을 허용하기 전에 isValidNumber 사용하여 숫자를 검증한 경우에만 올바르게 작동합니다.

 intlTelInput ( input , {
  hiddenInput : function ( telInputName ) {
    return {
      phone : "phone_full" ,
      country : "country_code"
    } ;
  }
} ) ;

그러면 제출 시 자동으로 채워지는 다음(숨겨진) 요소가 생성됩니다.

 < input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " >

i18n
유형: Object 기본값: {}
200개 이상의 국가 이름과 기타 사용자 인터페이스 텍스트(예: 국가 검색 입력을 위한 자리 표시자 텍스트)의 현지화/사용자 정의를 허용합니다. 이를 수행하는 가장 쉬운 방법은 제공된 번역 모듈 중 하나를 가져오고 i18n 해당 값으로 설정하는 것입니다(아래 옵션 1 참조). 이 방법으로 하나 이상의 개별 키를 재정의할 수도 있습니다(아래 옵션 1 참조). 또는 사용자 정의 번역을 제공할 수 있습니다(아래 옵션 2 참조). 직접 제공하는 경우 모든 국가 이름(국가 목록 프로젝트에서 복사할 수 있음, 예를 들어 프랑스어로 된 국가 이름은 다음과 같습니다)과 몇 가지 UI 문자열(아래 나열)을 지정해야 합니다. 예를 참조하세요.

현재 필요한 언어를 지원하지 않는 경우 직접 기여하는 것이 쉽습니다. 국가 목록 프로젝트에서 국가 이름을 자동으로 가져오므로 몇 가지 UI 번역 문자열만 제공하면 됩니다.

옵션 1: 제공된 번역 모듈 중 하나를 가져옵니다.

 import { fr } from "intl-tel-input/i18n" ;

intlTelInput ( input , {
  i18n : fr ,
} ) ;

// or to override one or more keys, you could do something like this
intlTelInput ( input , {
  i18n : {
    ... fr ,
    searchPlaceholder : "Recherche de pays" ,
  } ,
} ) ;

옵션 2: 나만의 맞춤 번역 정의

 intlTelInput ( input , {
  i18n : {
    // Country names - see the full list in src/js/intl-tel-input/i18n/en/countries.ts
    af : "Afghanistan" ,
    al : "Albania" ,
    dz : "Algeria" ,
    as : "American Samoa" ,
    ad : "Andorra" ,
    ...
    // Aria label for the selected country element
    selectedCountryAriaLabel : "Selected country" ,
    // Screen reader text for when no country is selected
    noCountrySelected : "No country selected" ,
    // Aria label for the country list element
    countryListAriaLabel : "List of countries" ,
    // Placeholder for the search input in the dropdown
    searchPlaceholder : "Search" ,
    // Screen reader text for when the search produces no results
    zeroSearchResults : "No results found" ,
    // Screen reader text for when the search produces 1 result
    oneSearchResult : "1 result found" ,
    // Screen reader text for when the search produces multiple results
    multipleSearchResults : "${count} results found" ,
  }
} ) ;

초기국가
유형: String 기본값: ""
국가 코드(예: 미국의 경우 "us" 를 지정하여 초기 국가 선택을 설정합니다. (사용자의 국가를 확신하지 않는 한 이 작업을 수행하지 않도록 주의하십시오. 잘못 설정하면 까다로운 문제가 발생할 수 있으며 사용자가 국가 번호를 자동으로 입력하고 확인하지 않고 양식을 제출하는 경우가 있습니다. 어떤 경우에는 유효성 검사를 통과할 수 있습니다. 잘못된 다이얼 코드로 번호를 저장하게 될 수 있습니다.) 또한, initialCountry "auto" 로 설정할 수도 있습니다. 그러면 IP 주소를 기반으로 사용자의 국가를 조회합니다( geoIpLookup 옵션 필요 - 예 참조). 그러나 initialCountry 사용하더라도 입력에 이미 국제 전화 코드가 있는 번호가 포함되어 있는 경우 국가 선택이 업데이트되지 않습니다.

loadUtilsOnInit (v25 토론 참조)
유형: String 또는 () => Promise<module> 기본값: "" 예: "/build/js/utils.js"

이는 포함된 utils.js를 (지연) 로드하는 한 가지 방법입니다(형식 지정/검증 등을 활성화하기 위해). 자세한 옵션은 유틸리티 스크립트 로드를 참조하세요. utils.js 파일을 호스팅한 다음 loadUtilsOnInit 옵션을 해당 URL로 설정하거나 CDN 호스팅 버전(예: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" 을 가리켜야 합니다. "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . 스크립트는 동적 import 문을 통해 로드됩니다. 이는 URL이 상대적일 수 없으며 절대적이어야 함을 의미합니다.

또는 utils 모듈에 대한 약속을 반환하는 함수일 수도 있습니다. Webpack과 같은 번들러를 사용할 때, 이는 utils 스크립트가 나머지 코드와 별도의 파일에 보관되어야 함을 번들러에게 알리는 데 사용될 수 있습니다. 예: { loadUtilsOnInit: () => import("intl-tel-input/utils") } .

스크립트는 플러그인을 초기화할 때만 가져오고 추가로 차단을 방지하기 위해 페이지 로드가 완료된 경우(창 로드 이벤트에서)에만 가져옵니다(스크립트는 ~260KB). 플러그인을 인스턴스화할 때 Promise 객체가 promise 인스턴스 속성 아래에 반환되므로 iti.promise.then(callback) 과 같은 작업을 수행하여 이와 같은 초기화 요청이 언제 완료되었는지 알 수 있습니다. 자세한 내용은 유틸리티 스크립트를 참조하세요.

전국 모드
유형: Boolean 기본값: true
국제 형식이 아닌 국내 형식으로 숫자 형식을 지정하세요. 이는 자리 표시자 번호와 사용자의 기존 번호를 표시할 때 적용됩니다. 사용자가 국가 형식으로 숫자를 입력하는 것은 괜찮습니다. 올바른 국가를 선택했다면 getNumber 사용하여 전체 국제 전화번호를 추출할 수 있습니다. 예를 참조하세요. 사용자가 국가 형식으로 번호를 입력하도록 권장하려면 이 옵션을 활성화한 상태로 두는 것이 좋습니다. 이는 일반적으로 국가 형식이 더 친숙하고 더 나은 사용자 경험을 제공하기 때문입니다.

만국가
유형: Array 기본값: []
드롭다운에는 지정한 국가만 표시됩니다. 예를 참조하세요.

자리 표시자번호 유형
유형: String 기본값: "MOBILE"
자리 표시자에 사용할 숫자 유형을 설정하려면 enum intlTelInput.utils.numberType (예: "FIXED_LINE" )의 키 중 하나를 지정하세요. Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

표시플래그
유형: Boolean 기본값: true
정치적인 이유로 플래그를 숨기려면 false로 설정하세요. 대신 일반 지구본 아이콘이 표시됩니다. Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

별도의 다이얼 코드
유형: Boolean 기본값: false
입력 옆에 선택한 국가의 국제전화 코드가 표시되어 입력된 번호의 일부인 것처럼 보입니다. 사용자는 표시된 다이얼 코드를 편집할 수 없으므로 새 다이얼 코드를 입력하려고 할 수 있습니다. 이 경우 두 개의 다이얼 코드가 나란히 있는 것을 방지하기 위해 자동으로 국가 드롭다운을 열고 검색 입력에 새 다이얼 코드를 입력합니다. 대신에. 따라서 +54를 입력하면 드롭다운에서 아르헨티나가 강조 표시되고 Enter를 눌러 선택하면 표시된 다이얼 코드가 업데이트됩니다(이 기능을 사용하려면 allowDropdown 및 countrySearch 활성화해야 함). Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

엄격한 모드
유형: Boolean 기본값: false
사용자가 입력을 입력할 때 관련 없는 문자는 무시하세요. 사용자는 처음에 숫자와 선택적인 더하기만 입력할 수 있습니다. 최대 유효 숫자 길이로 길이를 제한합니다(이는 validationNumberType 고려함). utils 스크립트를 로드해야 합니다. 예를 참조하세요.

전체 화면 팝업 사용
유형: Boolean 기본값: true on mobile devices, false otherwise
국가 목록이 전체 화면 팝업 또는 인라인 드롭다운으로 나타나는 시기를 제어합니다. 기본적으로 제한된 공간을 더 잘 활용하기 위해(사용자 에이전트 및 화면 너비에 따라) 모바일 장치에서는 전체 화면 팝업으로 표시되며(네이티브 <select> 작동 방식과 유사) 인라인 드롭다운으로 표시됩니다. 더 큰 장치/화면. Storybook에서 이 옵션을 사용해 보세요(React 구성 요소 사용).

유틸리티 스크립트 ️ 더 이상 사용되지 않음
유형: String 또는 () => Promise<module> 기본값: "" 예: "/build/js/utils.js"

이 옵션은 더 이상 사용되지 않으며 이름이 loadUtilsOnInit 으로 변경되었습니다. 해당 옵션의 세부정보를 확인하고 대신 사용하세요.

유효성 검사 번호 유형
유형: String 기본값: "MOBILE"
enum intlTelInput.utils.numberType (예: "FIXED_LINE" )의 키 중 하나를 지정하여 isValidNumber 로 검증 중에 적용할 숫자 유형과 strictMode 로 적용할 숫자 길이를 설정합니다. 특정 유형을 적용하지 않으려면 null 로 설정하세요.

인스턴스 메소드

이 예에서 iti 플러그인을 초기화할 때 반환되는 플러그인 인스턴스를 나타냅니다. 예:

 const iti = intlTelInput ( input ) ;

파괴하다
입력에서 플러그인을 제거하고 모든 이벤트 리스너를 바인딩 해제합니다.

 iti . destroy ( ) ;

getExtension
현재 번호에서 내선 번호를 가져옵니다. utils 스크립트를 로드해야 합니다.

 const extension = iti . getExtension ( ) ;

문자열을 반환합니다. 예를 들어 입력 값이 "[phone] ext. 1234" 이면 "1234" 반환합니다.

getNumber
주어진 형식으로 현재 번호를 가져옵니다(기본값은 E.164 표준). enum intlTelInput.utils.numberFormat 에서 다양한 형식을 사용할 수 있습니다. 여기에서 확인할 수 있습니다. utils 스크립트를 로드해야 합니다. nationalMode 가 활성화된 경우에도 전체 국제 전화번호가 반환될 수 있습니다. 또한 이 메서드는 유효한 숫자를 기대하므로 유효성 검사 후에만 사용해야 합니다.

 const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ;

문자열을 반환합니다(예: "[phone]"

getNumberType
현재 번호의 종류(유선/휴대폰/무료 등)를 확인하세요. utils 스크립트를 로드해야 합니다.

 const numberType = iti . getNumberType ( ) ;

열거형 intlTelInput.utils.numberType 의 다양한 옵션과 일치시킬 수 있는 정수를 반환합니다. 예:

 if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
    // is a mobile number
}

미국에서는 유선 전화번호와 휴대전화 번호를 구별할 방법이 없으므로 대신 FIXED_LINE_OR_MOBILE 반환합니다.

getSelectedCountryData
현재 선택된 국가에 대한 국가 데이터를 가져옵니다.

 const countryData = iti . getSelectedCountryData ( ) ;

다음과 같은 것을 반환합니다.

 {
  name : "Afghanistan" ,
  iso2 : "af" ,
  dialCode : "93"
}

getValidationError
유효성 검사 오류에 대한 자세한 내용을 알아보세요. utils 스크립트를 로드해야 합니다.

 const error = iti . getValidationError ( ) ;

열거형 intlTelInput.utils.validationError 의 다양한 옵션과 일치시킬 수 있는 정수를 반환합니다. 예:

 if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
    // the number is too short
}

isValidNumber
길이를 기준으로 현재 숫자가 유효한지 확인하세요. 대부분의 사용 사례에 충분할 예시를 참조하세요. 보다 정확한 유효성 검사는 isValidNumberPrecise 참조하세요. 그러나 isValidNumber 의 장점은 전 세계 국가에서 숫자 규칙을 정기적으로 업데이트하는 반면 숫자 길이는 거의 변경하지 않기 때문에 훨씬 더 미래에 대비할 수 있다는 것입니다. 이 메서드가 false 반환하면 getValidationError 사용하여 추가 정보를 얻을 수 있습니다. validationNumberType 옵션(기본적으로 "MOBILE"로 설정됨)을 준수합니다. utils 스크립트를 로드해야 합니다.

 const isValid = iti . isValidNumber ( ) ;

반환: true / false

isValidNumber정확함 ️ 더 이상 사용되지 않음 - 토론 참조
각 국가/지역 코드 등의 정확한 일치 규칙을 사용하여 현재 번호가 유효한지 확인하세요. 예를 참조하세요. 이러한 규칙은 전 세계 다양한 국가에서 매달 변경되므로 플러그인을 최신 상태로 유지하도록 주의해야 합니다. 그렇지 않으면 유효한 번호가 거부되기 시작합니다. 더 간단하고 미래 지향적인 검증 형식을 보려면 위의 isValidNumber 참조하세요. 유효성 검사에 실패하면 getValidationError 사용하여 자세한 정보를 얻을 수 있습니다. utils 스크립트를 로드해야 합니다.

 const isValid = iti . isValidNumberPrecise ( ) ;

반환: true / false

세트국가
선택한 국가를 변경하세요. setNumber 호출하고 권장 사용법인 국제 전화 코드가 포함된 번호를 전달할 때 선택한 국가가 자동으로 업데이트되므로 이 작업을 수행해야 하는 경우는 거의 없습니다. 국가를 기본 빈(지구본) 상태로 설정하려면 국가 코드 인수를 생략할 수 있습니다.

 iti . setCountry ( "gb" ) ;

세트번호
번호를 입력하고 그에 따라 선택한 국가를 업데이트하세요. formatOnDisplay 활성화된 경우 nationalMode 옵션에 따라 숫자를 국내 또는 국제 형식으로 포맷하려고 시도합니다.

 iti . setNumber ( "[phone]" ) ;

setPlaceholderNumberType
placeholderNumberType 옵션을 변경합니다.

 iti . setPlaceholderNumberType ( "FIXED_LINE" ) ;

비활성화됨
전화 입력과 선택한 국가 버튼 모두의 비활성화 속성을 업데이트합니다. 부울 값을 허용합니다. 참고: 입력의 비활성화된 속성을 직접 업데이트하는 대신 이를 사용하는 것이 좋습니다.

 iti . setDisabled ( true ) ; 

정적 방법

getCountryData
플러그인의 국가 데이터를 검색합니다. 예를 들어 자신만의 국가 드롭다운을 생성하기 위해 다른 곳에서 재사용하거나, 예를 참조하거나 이를 사용하여 국가 데이터를 수정할 수 있습니다. 플러그인을 초기화하기 전에 모든 수정을 완료해야 합니다.

 const countryData = intlTelInput . getCountryData ( ) ;

국가 객체의 배열을 반환합니다.

 [ {
  name : "Afghanistan" ,
  iso2 : "af" ,
  dialCode : "93"
} , ... ]

getInstance
플러그인을 초기화한 후 관련 입력 요소를 전달하기만 하면 이 메서드를 사용하여 언제든지 인스턴스에 다시 액세스할 수 있습니다.

 const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc

loadUtils (v25 토론 참조)
loadUtilsOnInit 옵션의 대안인 이 방법을 사용하면 요청 시 utils.js 스크립트를 수동으로 로드하여 형식 지정/검증 등을 활성화할 수 있습니다. 자세한 내용은 유틸리티 스크립트 로드를 참조하세요. 이 메소드는 페이지당 한 번만 호출되어야 합니다. Promise 객체가 반환되므로 loadUtils().then(callback) 사용하여 완료 시기를 알 수 있습니다.

 // Load from a URL:
intlTelInput . loadUtils ( "/build/js/utils.js" ) ;

// Or manage load via some other method with a function:
intlTelInput . loadUtils ( async ( ) => {
    // Your own loading logic here. Return a JavaScript "module" object with
    // the utils as the default export.
    return { default : { /* a copy of the utils module */ } }
} ) ; 

이벤트

입력 요소에서 트리거되는 다음 이벤트를 수신할 수 있습니다.

국가 변경
이는 선택한 국가가 업데이트될 때 트리거됩니다. 예를 들어 사용자가 드롭다운에서 국가를 선택하거나 입력에 다른 다이얼 코드를 입력하거나 setCountry 호출하는 경우 등이 있습니다.

 input . addEventListener ( "countrychange" , function ( ) {
  // do something with iti.getSelectedCountryData()
} ) ;

여기 예를 참조하세요: 국가 동기화

열림:국가 드롭다운
이는 사용자가 드롭다운을 열 때 트리거됩니다.

닫기:국가 드롭다운
이는 사용자가 드롭다운을 닫을 때 트리거됩니다.

테마 / 다크 모드

테마 지정에 사용할 수 있는 CSS 변수가 많이 있습니다. 전체 목록은 intlTelInput.scss를 참조하세요.

빈 상태(지구 아이콘)의 경우 기본 버전은 어두운 회색이며 어두운 테마와 더 잘 어울리는 "밝은" 버전도 제공합니다. 또는 테마에 필요한 색상으로 지구본 아이콘을 쉽게 다시 생성할 수 있습니다. 가능한 가장 높은 해상도로 다운로드한 다음 이미지를 필요한 크기(기본 버전의 경우 너비 20px, @2x 버전의 경우 너비 40px)로 축소하는 것이 좋습니다.

어두운 모드의 예(아래 스크린샷 포함):

 @media ( prefers-color-scheme : dark) {
  . iti {
    --iti-border-color : # 5b5b5b ;
    --iti-dialcode-color : # 999999 ;
    --iti-dropdown-bg : # 0d1117 ;
    --iti-arrow-color : # aaaaaa ;
    --iti-hover-color : # 30363d ;
    --iti-path-globe-1x : url ( "path/to/globe_light.webp" );
    --iti-path-globe-2x : url ( "path/to/[email protected]" );
  }
}