intl tel input
v24.7.0
ข่าว: ตอนนี้เรามีองค์ประกอบ Vue ของเราเองแล้ว!
ข่าว: ตอนนี้เรามีส่วนประกอบ React ของเราเองแล้ว! เล่นกับมันใน Storybook
️ ข่าว: ขณะนี้เรามีการแปลมากกว่า 30 ภาษา! ดูพวกเขาในการดำเนินการ
การป้อนข้อมูลโทรศัพท์ระหว่างประเทศเป็นปลั๊กอิน JavaScript สำหรับการป้อนและตรวจสอบหมายเลขโทรศัพท์ระหว่างประเทศ ใช้ช่องป้อนข้อมูลปกติ เพิ่มรายการประเทศแบบเลื่อนลงที่ค้นหาได้ ตรวจหาประเทศของผู้ใช้โดยอัตโนมัติ แสดงหมายเลขตัวยึดตำแหน่งที่เกี่ยวข้อง จัดรูปแบบตัวเลขในขณะที่คุณพิมพ์ และมีวิธีตรวจสอบที่ครอบคลุม รวมถึงส่วนประกอบ React และ Vue ด้วย
หากคุณพบว่าปลั๊กอินมีประโยชน์ โปรดพิจารณาสนับสนุนโครงการนี้
ใช้ API ของ Twilio เพื่อสร้างการยืนยันทางโทรศัพท์, SMS 2FA, การแจ้งเตือนการนัดหมาย, การแจ้งเตือนทางการตลาด และอื่นๆ อีกมากมาย เราแทบรอไม่ไหวที่จะเห็นสิ่งที่คุณสร้าง
ขณะนี้เรามีทั้งส่วนประกอบ React และ Vue ควบคู่ไปกับปลั๊กอิน JavaScript ทั่วไป Readme นี้มีไว้สำหรับปลั๊กอิน JavaScript ดู Readme React Component หรือ Readme Vue Component
คุณสามารถดูการสาธิตสดและดูตัวอย่างวิธีใช้ตัวเลือกต่างๆ ได้ หรือลองด้วยตัวเองโดยการดาวน์โหลดโปรเจ็กต์และเปิด demo.html ในเบราว์เซอร์
ตามค่าเริ่มต้น บนอุปกรณ์เคลื่อนที่ เราจะแสดงป๊อปอัปแบบเต็มหน้าจอแทนเมนูแบบเลื่อนลงแบบอินไลน์ เพื่อใช้ประโยชน์จากพื้นที่หน้าจอที่จำกัดได้ดียิ่งขึ้น สิ่งนี้คล้ายกับวิธีการทำงานขององค์ประกอบ <select> ดั้งเดิม คุณสามารถควบคุมลักษณะการทำงานนี้ได้โดยใช้ตัวเลือก useFullscreenPopup คุณสามารถปิดป๊อปอัปได้โดยเลือกประเทศจากรายการหรือแตะที่พื้นที่สีเทาที่ด้านข้าง ดูตัวอย่าง (โดยใช้ส่วนประกอบ React)
| โครเมียม | ไฟร์ฟอกซ์ | ซาฟารี | ขอบ |
|---|---|---|---|
| v14+ |
หมายเหตุ: ขณะนี้เราได้ยกเลิกการรองรับ Internet Explorer ทุกเวอร์ชันแล้ว เนื่องจาก Windows เวอร์ชันใดไม่รองรับอีกต่อไป
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " > < 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 > ติดตั้งด้วย npm: npm install intl-tel-input --save หรือ Yarn: yarn add intl-tel-input
นำเข้า CSS: import 'intl-tel-input/build/css/intlTelInput.css';
กำหนดเส้นทางไปยัง flags.webp และ Globe.webp ใน CSS ของคุณโดยการแทนที่ตัวแปร CSS
. 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]' );
} import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ; บันเดิลส่วนใหญ่ (เช่น Webpack, Vite หรือ Parcel) จะมองเห็นสิ่งนี้และวางสคริปต์ยูทิลิตี้ไว้ในบันเดิลที่แยกจากกัน และโหลดแบบอะซิงโครนัสเมื่อจำเป็นเท่านั้น หากวิธีนี้ใช้ไม่ได้กับบันเดิลของคุณหรือคุณต้องการโหลดโมดูล utils จากตำแหน่งอื่น (เช่น CDN) คุณสามารถตั้งค่าตัวเลือก 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` ;
} ) ; ดาวน์โหลดรุ่นล่าสุด หรือดีกว่านั้นให้ติดตั้งด้วยเวลา npm
เพิ่มสไตล์ชีต
< link rel =" stylesheet " href =" path/to/intlTelInput.css " >. 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]' );
} < script src =" path/to/intlTelInput.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "path/to/utils.js"
} ) ;
</ script > เราขอแนะนำให้คุณโหลด utils.js ที่รวมอยู่ ซึ่งเปิดใช้งานการจัดรูปแบบและการตรวจสอบ ฯลฯ จากนั้นปลั๊กอินจะถูกสร้างขึ้นเพื่อจัดการกับตัวเลขในรูปแบบสากลเต็มรูปแบบเสมอ (เช่น "+17024181234") และแปลงตัวเลขตามนั้น - แม้ว่าจะเป็น nationalMode หรือ separateDialCode ถูกเปิดใช้งาน เราขอแนะนำให้คุณรับ จัดเก็บ และตั้งค่าตัวเลขในรูปแบบนี้โดยเฉพาะเพื่อความง่าย - จากนั้น คุณจะไม่ต้องจัดการกับรหัสประเทศแยกกัน เนื่องจากหมายเลขต่างประเทศแบบเต็มจะรวมข้อมูลรหัสประเทศไว้ด้วย
คุณสามารถรับหมายเลขระหว่างประเทศแบบเต็มได้เสมอ (รวมถึงรหัสประเทศ) โดยใช้ getNumber จากนั้นคุณจะต้องจัดเก็บสตริงนั้นไว้ในฐานข้อมูลของคุณเท่านั้น (คุณไม่จำเป็นต้องจัดเก็บประเทศแยกต่างหาก) จากนั้นในครั้งถัดไปที่คุณเริ่มต้นปลั๊กอิน เมื่อใส่หมายเลขนั้นเข้าไป ระบบจะตั้งค่าประเทศโดยอัตโนมัติและจัดรูปแบบตามตัวเลือกที่คุณระบุ (เช่น เมื่อใช้ nationalMode ระบบจะแสดงหมายเลขเป็นรูปแบบประเทศโดยอัตโนมัติ โดยจะลบรหัสการโทรระหว่างประเทศออก)
หากคุณทราบประเทศของผู้ใช้ คุณสามารถตั้งค่าด้วย initialCountry (เช่น "us" สำหรับสหรัฐอเมริกา) และถ้าคุณไม่ทราบ เราขอแนะนำให้ตั้ง initialCountry เป็น "auto" (พร้อมกับตัวเลือก geoIpLookup ) เพื่อกำหนดประเทศของผู้ใช้ ประเทศตามที่อยู่ IP - ดูตัวอย่าง
หากคุณรู้ภาษาของผู้ใช้ คุณสามารถใช้คำแปลที่รวมไว้เพื่อแปลชื่อประเทศ (ฯลฯ) - ดูตัวอย่าง
เมื่อคุณเริ่มต้นปลั๊กอิน อาร์กิวเมนต์แรกคือองค์ประกอบอินพุต และอาร์กิวเมนต์ที่สองคือออบเจ็กต์ที่มีตัวเลือกการเริ่มต้นใดๆ ที่คุณต้องการ ซึ่งมีรายละเอียดด้านล่าง หมายเหตุ: ตัวเลือกใดๆ ที่ใช้รหัสประเทศควรเป็นรหัส ISO 3166-1 alpha-2
อนุญาตดรอปดาวน์
ประเภท: Boolean ค่าเริ่มต้น: true
ไม่ว่าจะอนุญาตให้เลื่อนลงหรือไม่ หากปิดใช้งาน จะไม่มีลูกศรแบบเลื่อนลง และไม่สามารถคลิกประเทศที่เลือกได้ นอกจากนี้ หากเปิดใช้งาน showFlags เราจะแสดงธงที่เลือกไว้ทางด้านขวาแทน เนื่องจากเป็นเพียงเครื่องหมายแสดงสถานะ โปรดทราบว่าหากเปิดใช้งาน separateDialCode ไว้ allowDropdown จะถูกบังคับให้เป็น true เนื่องจากจำเป็นต้องมีเมนูแบบเลื่อนลงเมื่อผู้ใช้พิมพ์ "+" ในกรณีนี้ เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
autoPlaceholder
ประเภท: String เริ่มต้น: "polite"
ตั้งค่าตัวยึดตำแหน่งอินพุตเป็นหมายเลขตัวอย่างสำหรับประเทศที่เลือก และอัปเดตหากประเทศมีการเปลี่ยนแปลง คุณสามารถระบุประเภทหมายเลขได้โดยใช้ตัวเลือก placeholderNumberType ตามค่าเริ่มต้น จะมีการตั้งค่าเป็น "polite" ซึ่งหมายความว่าจะตั้งค่าตัวยึดตำแหน่งเฉพาะในกรณีที่อินพุตยังไม่มี คุณยังสามารถตั้งค่าเป็น "aggressive" ซึ่งจะแทนที่ตัวยึดตำแหน่งที่มีอยู่ หรือ "off" จำเป็นต้องโหลดสคริปต์ utils
คอนเทนเนอร์คลาส
ประเภท: String ค่าเริ่มต้น: ""
คลาสเพิ่มเติมที่จะเพิ่มลงใน wrapper <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
รูปแบบ OnDisplay
ประเภท: Boolean ค่าเริ่มต้น: true
จัดรูปแบบค่าอินพุต (ตามตัวเลือก nationalMode ) ระหว่างการกำหนดค่าเริ่มต้น และบน setNumber จำเป็นต้องโหลดสคริปต์ utils
geoIpLookup
ประเภท: 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 (เป็นทางเลือก) เพื่อระบุชื่อของอินพุตที่ซ่อนอยู่สำหรับหมายเลขโทรศัพท์และรหัสประเทศตามลำดับ สิ่งนี้มีประโยชน์สำหรับการส่งแบบฟอร์มที่ไม่ใช่ Ajax เพื่อให้แน่ใจว่าหมายเลขระหว่างประเทศและรหัสประเทศทั้งหมดจะถูกบันทึก โดยเฉพาะเมื่อเปิดใช้งาน nationalMode
* หมายเหตุ : คุณลักษณะนี้ต้องการให้อินพุตอยู่ภายในองค์ประกอบ <form> เนื่องจากจะรับฟังเหตุการณ์ submit ในองค์ประกอบแบบฟอร์มที่ใกล้เคียงที่สุด โปรดทราบว่าเนื่องจากสิ่งนี้ใช้ 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 คีย์ได้ด้วยวิธีนี้ (ดูตัวเลือก 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" สคริปต์ถูกโหลดผ่านคำสั่งนำเข้าแบบไดนามิก ซึ่งหมายความว่า URL ไม่สามารถสัมพันธ์กันได้ - URL จะต้องเป็นแบบสัมบูรณ์
หรืออาจเป็นฟังก์ชันที่ส่งคืนสัญญาสำหรับโมดูล utils เมื่อใช้บันเดิลเช่น Webpack สิ่งนี้สามารถใช้เพื่อบอกบันเดิลว่าควรเก็บสคริปต์ utils ไว้ในไฟล์แยกต่างหากจากส่วนที่เหลือของโค้ดของคุณ ตัวอย่างเช่น: { loadUtilsOnInit: () => import("intl-tel-input/utils") }
สคริปต์จะถูกดึงเฉพาะเมื่อคุณเริ่มต้นปลั๊กอิน และเพิ่มเติมเฉพาะเมื่อเพจโหลดเสร็จแล้วเท่านั้น (ในเหตุการณ์โหลดหน้าต่าง) เพื่อป้องกันการบล็อก (สคริปต์คือ ~ 260KB) เมื่อสร้างอินสแตนซ์ของปลั๊กอิน ออบเจ็กต์ Promise จะถูกส่งกลับภายใต้คุณสมบัติอินสแตนซ์ promise ดังนั้นคุณจึงสามารถดำเนินการบางอย่างเช่น iti.promise.then(callback) เพื่อทราบว่าคำขอการเริ่มต้นเช่นนี้เสร็จสิ้นเมื่อใด ดูสคริปต์ยูทิลิตี้สำหรับข้อมูลเพิ่มเติม
โหมดแห่งชาติ
ประเภท: Boolean ค่าเริ่มต้น: true
จัดรูปแบบตัวเลขในรูปแบบแห่งชาติ แทนที่จะเป็นรูปแบบสากล สิ่งนี้ใช้กับหมายเลขตัวยึดตำแหน่ง และเมื่อแสดงหมายเลขที่มีอยู่ของผู้ใช้ โปรดทราบว่าผู้ใช้สามารถพิมพ์ตัวเลขในรูปแบบประเทศได้ ตราบใดที่พวกเขาเลือกประเทศที่ถูกต้อง คุณสามารถใช้ getNumber เพื่อแยกหมายเลขต่างประเทศทั้งหมดได้ ดูตัวอย่าง ขอแนะนำให้เปิดใช้งานตัวเลือกนี้ไว้ เพื่อสนับสนุนให้ผู้ใช้ป้อนหมายเลขของตนในรูปแบบประเทศ เนื่องจากโดยปกติแล้วพวกเขาจะคุ้นเคยมากกว่า ดังนั้นจึงสร้างประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น
เท่านั้นประเทศ
ประเภท: Array ค่าเริ่มต้น: []
ในเมนูแบบเลื่อนลง แสดงเฉพาะประเทศที่คุณระบุ - ดูตัวอย่าง
ตัวยึดตำแหน่งNumberType
ประเภท: String เริ่มต้น: "MOBILE"
ระบุหนึ่งในคีย์จาก enum intlTelInput.utils.numberType (เช่น "FIXED_LINE" ) เพื่อตั้งค่าประเภทตัวเลขที่จะใช้สำหรับตัวยึดตำแหน่ง เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
แสดงธง
ประเภท: Boolean ค่าเริ่มต้น: true
ตั้งค่านี้เป็นเท็จเพื่อซ่อนธง เช่น ด้วยเหตุผลทางการเมือง แต่จะแสดงไอคอนลูกโลกทั่วไปแทน เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
แยกDialCode
ประเภท: Boolean เริ่มต้น: false
แสดงรหัสการโทรระหว่างประเทศของประเทศที่เลือกถัดจากช่องป้อนข้อมูล เพื่อให้ดูเหมือนว่าเป็นส่วนหนึ่งของหมายเลขที่พิมพ์ เนื่องจากผู้ใช้ไม่สามารถแก้ไขรหัสการโทรที่แสดงได้ พวกเขาอาจลองพิมพ์รหัสใหม่ - ในกรณีนี้ เพื่อหลีกเลี่ยงการมีรหัสการโทรสองรหัสติดกัน เราจะเปิดเมนูแบบเลื่อนลงประเทศโดยอัตโนมัติและใส่รหัสการโทรใหม่ในการป้อนข้อมูลการค้นหา แทน. ดังนั้น หากพวกเขาพิมพ์ +54 อาร์เจนตินาจะถูกไฮไลต์ในรายการแบบเลื่อนลง และพวกเขาสามารถกด Enter เพื่อเลือก โดยอัปเดตรหัสการโทรที่แสดง (คุณลักษณะนี้ต้องเปิดใช้งาน allowDropdown และ countrySearch ) เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
โหมดเข้มงวด
ประเภท: Boolean เริ่มต้น: false
ขณะที่ผู้ใช้พิมพ์อินพุต ให้ละเว้นอักขระที่ไม่เกี่ยวข้อง ผู้ใช้สามารถป้อนได้เฉพาะอักขระตัวเลขและเครื่องหมายบวกเพิ่มเติมที่จุดเริ่มต้นเท่านั้น กำหนดความยาวด้วยความยาวตัวเลขสูงสุดที่ถูกต้อง (ซึ่งคำนึงถึง validationNumberType ) จำเป็นต้องโหลดสคริปต์ utils ดูตัวอย่าง
ใช้FullscreenPopup
ประเภท: Boolean ค่าเริ่มต้น: true on mobile devices, false otherwise
ควบคุมเมื่อรายชื่อประเทศปรากฏเป็นป๊อปอัปแบบเต็มหน้าจอเทียบกับรายการแบบเลื่อนลงแบบอินไลน์ ตามค่าเริ่มต้น จะปรากฏเป็นป๊อปอัปแบบเต็มหน้าจอบนอุปกรณ์เคลื่อนที่ (ขึ้นอยู่กับตัวแทนผู้ใช้และความกว้างของหน้าจอ) เพื่อใช้ประโยชน์จากพื้นที่ที่จำกัดได้ดีขึ้น (คล้ายกับวิธีการทำงานของ <select> แบบเนทิฟ) และเป็นเมนูแบบเลื่อนลงแบบอินไลน์บน อุปกรณ์/หน้าจอขนาดใหญ่ขึ้น เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
utilsScript
ประเภท: 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 ( ) ; รับส่วนขยาย
รับนามสกุลจากหมายเลขปัจจุบัน จำเป็นต้องโหลดสคริปต์ utils
const extension = iti . getExtension ( ) ; ส่งกลับสตริง เช่น หากค่าอินพุตเป็น "(702) 555-5555 ext. 1234" ก็จะส่งกลับ "1234"
รับหมายเลข
รับหมายเลขปัจจุบันในรูปแบบที่กำหนด (ค่าเริ่มต้นเป็นมาตรฐาน E.164) รูปแบบที่แตกต่างกันมีอยู่ใน enum intlTelInput.utils.numberFormat ซึ่งคุณสามารถดูได้ที่นี่ จำเป็นต้องโหลดสคริปต์ utils โปรดทราบว่าแม้ว่าจะเปิดใช้งาน nationalMode แล้ว ก็ยังสามารถส่งคืนหมายเลขต่างประเทศแบบเต็มได้ โปรดทราบว่าวิธีนี้ต้องการตัวเลขที่ถูกต้อง และควรใช้หลังจากการตรวจสอบความถูกต้องแล้วเท่านั้น
const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ; ส่งกลับสตริง เช่น "+17024181234"
getNumberType
รับประเภท (โทรศัพท์พื้นฐาน/มือถือ/โทรฟรี ฯลฯ) ของหมายเลขปัจจุบัน จำเป็นต้องโหลดสคริปต์ utils
const numberType = iti . getNumberType ( ) ; ส่งกลับจำนวนเต็มซึ่งคุณสามารถจับคู่กับตัวเลือกต่างๆ ใน enum 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"
} รับข้อผิดพลาดในการตรวจสอบความถูกต้อง
รับข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาดในการตรวจสอบ จำเป็นต้องโหลดสคริปต์ utils
const error = iti . getValidationError ( ) ; ส่งกลับจำนวนเต็มซึ่งคุณสามารถจับคู่กับตัวเลือกต่างๆ ใน enum intlTelInput.utils.validationError เช่น
if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
} เป็นValidNumber
ตรวจสอบว่าตัวเลขปัจจุบันถูกต้องตามความยาวหรือไม่ - ดูตัวอย่าง ซึ่งน่าจะเพียงพอสำหรับกรณีการใช้งานส่วนใหญ่ ดู isValidNumberPrecise สำหรับการตรวจสอบที่แม่นยำยิ่งขึ้น แต่ข้อดีของ isValidNumber ก็คือ สามารถพิสูจน์ได้ในอนาคตมากกว่ามาก ในขณะที่ประเทศต่างๆ ทั่วโลกอัปเดตกฎตัวเลขเป็นประจำ แต่ก็แทบจะไม่เปลี่ยนความยาวของตัวเลขเลย หากวิธีนี้ส่งคืน false คุณสามารถใช้ getValidationError เพื่อรับข้อมูลเพิ่มเติมได้ เคารพตัวเลือก validationNumberType (ซึ่งตั้งค่าเป็น "MOBILE" ตามค่าเริ่มต้น) จำเป็นต้องโหลดสคริปต์ utils
const isValid = iti . isValidNumber ( ) ; ผลตอบแทน: true / false
isValidNumberPrecise
ตรวจสอบว่าหมายเลขปัจจุบันถูกต้องหรือไม่โดยใช้กฎการจับคู่ที่แม่นยำสำหรับรหัสประเทศ/พื้นที่ ฯลฯ - ดูตัวอย่าง โปรดทราบว่ากฎเหล่านี้เปลี่ยนแปลงในแต่ละเดือนสำหรับประเทศต่างๆ ทั่วโลก ดังนั้นคุณต้องระมัดระวังในการอัพเดตปลั๊กอินให้เป็นปัจจุบัน ไม่เช่นนั้นคุณจะเริ่มปฏิเสธหมายเลขที่ถูกต้อง สำหรับรูปแบบการตรวจสอบที่ง่ายกว่าและรองรับในอนาคต โปรดดูที่ isValidNumber ด้านบน หากการตรวจสอบล้มเหลว คุณสามารถใช้ getValidationError เพื่อรับข้อมูลเพิ่มเติม จำเป็นต้องโหลดสคริปต์ utils
const isValid = iti . isValidNumberPrecise ( ) ; ผลตอบแทน: true / false
ตั้งประเทศ
เปลี่ยนประเทศที่เลือก หากคุณจำเป็นต้องทำเช่นนี้ อาจเป็นเรื่องยากหากเกิดขึ้น เนื่องจากประเทศที่เลือกจะได้รับการอัปเดตโดยอัตโนมัติเมื่อโทรไป setNumber และส่งผ่านหมายเลขรวมทั้งรหัสการโทรระหว่างประเทศ ซึ่งเป็นการใช้งานที่แนะนำ โปรดทราบว่าคุณสามารถละเว้นอาร์กิวเมนต์รหัสประเทศเพื่อตั้งค่าประเทศให้เป็นสถานะว่างเปล่า (ลูกโลก) เริ่มต้นได้
iti . setCountry ( "gb" ) ; ชุดหมายเลข
ใส่ตัวเลข และอัพเดตประเทศที่เลือกตามนั้น โปรดทราบว่าหากเปิดใช้งาน formatOnDisplay การดำเนินการนี้จะพยายามจัดรูปแบบตัวเลขให้เป็นรูปแบบระดับชาติหรือนานาชาติตามตัวเลือก nationalMode
iti . setNumber ( "+447733123456" ) ; setPlaceholderNumberType
เปลี่ยนตัวเลือกตัวยึดตำแหน่งNumberType
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; ตั้งค่าปิดการใช้งาน
อัปเดตคุณลักษณะที่ปิดใช้งานของทั้งอินพุตโทรศัพท์และปุ่มประเทศที่เลือก ยอมรับค่าบูลีน หมายเหตุ: เราขอแนะนำให้ใช้สิ่งนี้แทนการอัปเดตแอตทริบิวต์ที่ปิดใช้งานของอินพุตโดยตรง
iti . setDisabled ( true ) ; รับ CountryData
ดึงข้อมูลประเทศของปลั๊กอิน - เพื่อนำมาใช้ซ้ำที่อื่น เช่น เพื่อสร้างรายการแบบเลื่อนลงประเทศของคุณเอง - ดูตัวอย่าง หรือคุณสามารถใช้เพื่อแก้ไขข้อมูลประเทศได้ โปรดทราบว่าต้องทำการแก้ไขใดๆ ก่อนเริ่มต้นปลั๊กอิน
const countryData = intlTelInput . getCountryData ( ) ;ส่งกลับอาร์เรย์ของวัตถุประเทศ:
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ] รับอินสแตนซ์
หลังจากเริ่มต้นปลั๊กอินแล้ว คุณสามารถเข้าถึงอินสแตนซ์ได้อีกครั้งโดยใช้วิธีนี้ เพียงส่งองค์ประกอบอินพุตที่เกี่ยวข้องเข้าไป
const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc loadUtils (ดูการสนทนา v25)
อีกทางเลือกหนึ่งของตัวเลือก loadUtilsOnInit คือวิธีนี้ช่วยให้คุณโหลดสคริปต์ utils.js ด้วยตนเองตามความต้องการ เพื่อเปิดใช้งานการจัดรูปแบบ/การตรวจสอบความถูกต้อง ฯลฯ ดูการโหลดสคริปต์ Utilities สำหรับข้อมูลเพิ่มเติม ควรเรียกวิธีนี้เพียงครั้งเดียวต่อหน้า ออบเจ็กต์ 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()
} ) ;ดูตัวอย่างที่นี่: การซิงค์ประเทศ
เปิด:countrydropdown
สิ่งนี้จะเกิดขึ้นเมื่อผู้ใช้เปิดเมนูแบบเลื่อนลง
ปิด:countrydropdown
สิ่งนี้จะเกิดขึ้นเมื่อผู้ใช้ปิดเมนูแบบเลื่อนลง
มีตัวแปร CSS มากมายสำหรับการกำหนดธีม ดู intlTelInput.scss สำหรับรายการทั้งหมด
สำหรับสถานะว่างเปล่า (ไอคอนลูกโลก) เวอร์ชันเริ่มต้นจะเป็นสีเทาเข้ม และเรายังจัดเตรียมเวอร์ชัน "สว่าง" ไว้ด้วย ซึ่งน่าจะทำงานได้ดีกว่ากับธีมสีเข้ม หรือคุณสามารถสร้างไอคอนลูกโลกขึ้นมาใหม่ในสีใดก็ได้ที่คุณต้องการสำหรับธีมของคุณ เราขอแนะนำให้คุณดาวน์โหลดด้วยความละเอียดสูงสุดเท่าที่จะเป็นไปได้ จากนั้นลดขนาดรูปภาพลงตามขนาดที่ต้องการ (กว้าง 20px สำหรับเวอร์ชันเริ่มต้น และกว้าง 40px สำหรับเวอร์ชัน @2x)
ตัวอย่างโหมดมืด (พร้อมภาพหน้าจอด้านล่าง):
@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]" );
}
}
