อินพุตโทรศัพท์ระหว่างประเทศ
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 ในเบราว์เซอร์
ตามค่าเริ่มต้น บนอุปกรณ์เคลื่อนที่ เราจะแสดงป๊อปอัปแบบเต็มหน้าจอแทนเมนูแบบเลื่อนลงแบบอินไลน์ เพื่อใช้ประโยชน์จากพื้นที่หน้าจอที่จำกัดได้ดียิ่งขึ้น สิ่งนี้คล้ายกับวิธีการทำงานขององค์ประกอบ ดั้งเดิม คุณสามารถควบคุมลักษณะการทำงานนี้ได้โดยใช้ตัวเลือก 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
คอนเทนเนอร์คลาส ประเทศสั่งซื้อ ค้นหาประเทศ ตัวยึดตำแหน่งแบบกำหนดเอง ดรอปดาวน์คอนเทนเนอร์ ไม่รวมประเทศ แก้ไข DropdownWidth จัดรูปแบบ AsYouType รูปแบบ OnDisplay geoIpLookup นี่คือตัวอย่างการใช้บริการ ipapi: โปรดทราบว่าจะต้องเรียกการเรียกกลับ อินพุตที่ซ่อนอยู่ * หมายเหตุ : คุณลักษณะนี้ต้องการให้อินพุตอยู่ภายในองค์ประกอบ สิ่งนี้จะสร้างองค์ประกอบ (ซ่อน) ต่อไปนี้ ซึ่งจะถูกเติมโดยอัตโนมัติเมื่อส่ง: i18n หากปัจจุบันเราไม่รองรับภาษาที่คุณต้องการ เป็นเรื่องง่ายที่จะมีส่วนร่วมด้วยตนเอง - คุณเพียงแค่ต้องระบุสตริงการแปล UI เพียงไม่กี่รายการ เนื่องจากเราจะดึงชื่อประเทศจากโครงการรายชื่อประเทศโดยอัตโนมัติ ตัวเลือกที่ 1: นำเข้าหนึ่งในโมดูลการแปลที่มีให้ ตัวเลือกที่ 2: กำหนดการแปลที่คุณกำหนดเอง ประเทศเริ่มต้น loadUtilsOnInit (ดูการสนทนา v25) นี่เป็นวิธีหนึ่งในการ (ขี้เกียจ) โหลด utils.js ที่รวมไว้ (เพื่อเปิดใช้งานการจัดรูปแบบ/การตรวจสอบ ฯลฯ) - ดูการโหลดสคริปต์ยูทิลิตี้สำหรับตัวเลือกเพิ่มเติม คุณจะต้องโฮสต์ไฟล์ utils.js จากนั้นตั้งค่าตัวเลือก หรืออาจเป็นฟังก์ชันที่ส่งคืนสัญญาสำหรับโมดูล utils เมื่อใช้บันเดิลเช่น Webpack สิ่งนี้สามารถใช้เพื่อบอกบันเดิลว่าควรเก็บสคริปต์ utils ไว้ในไฟล์แยกต่างหากจากส่วนที่เหลือของโค้ดของคุณ ตัวอย่างเช่น: สคริปต์จะถูกดึงเฉพาะเมื่อคุณเริ่มต้นปลั๊กอิน และเพิ่มเติมเฉพาะเมื่อเพจโหลดเสร็จแล้วเท่านั้น (ในเหตุการณ์โหลดหน้าต่าง) เพื่อป้องกันการบล็อก (สคริปต์คือ ~ 260KB) เมื่อสร้างอินสแตนซ์ของปลั๊กอิน ออบเจ็กต์ Promise จะถูกส่งกลับภายใต้คุณสมบัติอินสแตนซ์ โหมดแห่งชาติ เท่านั้นประเทศ ตัวยึดตำแหน่งNumberType แสดงธง แยกDialCode โหมดเข้มงวด ใช้FullscreenPopup utilsScript ตัวเลือกนี้เลิกใช้แล้วและเปลี่ยนชื่อเป็น การตรวจสอบหมายเลขประเภท ในตัวอย่างเหล่านี้ ทำลาย รับส่วนขยาย ส่งกลับสตริง เช่น หากค่าอินพุตเป็น รับหมายเลข ส่งกลับสตริง เช่น getNumberType ส่งกลับจำนวนเต็มซึ่งคุณสามารถจับคู่กับตัวเลือกต่างๆ ใน enum โปรดทราบว่าในสหรัฐอเมริกาไม่มีทางแยกความแตกต่างระหว่างหมายเลขโทรศัพท์พื้นฐานและหมายเลขโทรศัพท์มือถือ ดังนั้น จะส่งกลับ getSelectedCountryData ส่งคืนบางสิ่งเช่นนี้: รับข้อผิดพลาดในการตรวจสอบความถูกต้อง ส่งกลับจำนวนเต็มซึ่งคุณสามารถจับคู่กับตัวเลือกต่างๆ ใน enum เป็นValidNumber ผลตอบแทน: isValidNumberPrecise ผลตอบแทน: ตั้งประเทศ ชุดหมายเลข setPlaceholderNumberType ตั้งค่าปิดการใช้งาน รับ CountryData ส่งกลับอาร์เรย์ของวัตถุประเทศ: รับอินสแตนซ์ loadUtils (ดูการสนทนา v25) คุณสามารถฟังเหตุการณ์ต่อไปนี้ที่ทริกเกอร์ในองค์ประกอบอินพุต การเปลี่ยนแปลงประเทศ ดูตัวอย่างที่นี่: การซิงค์ประเทศ เปิด:countrydropdown ปิด:countrydropdown มีตัวแปร CSS มากมายสำหรับการกำหนดธีม ดู intlTelInput.scss สำหรับรายการทั้งหมด สำหรับสถานะว่างเปล่า (ไอคอนลูกโลก) เวอร์ชันเริ่มต้นจะเป็นสีเทาเข้ม และเรายังจัดเตรียมเวอร์ชัน "สว่าง" ไว้ด้วย ซึ่งน่าจะทำงานได้ดีกว่ากับธีมสีเข้ม หรือคุณสามารถสร้างไอคอนลูกโลกขึ้นมาใหม่ในสีใดก็ได้ที่คุณต้องการสำหรับธีมของคุณ เราขอแนะนำให้คุณดาวน์โหลดด้วยความละเอียดสูงสุดเท่าที่จะเป็นไปได้ จากนั้นลดขนาดรูปภาพลงตามขนาดที่ต้องการ (กว้าง 20px สำหรับเวอร์ชันเริ่มต้น และกว้าง 40px สำหรับเวอร์ชัน @2x) ตัวอย่างโหมดมืด (พร้อมภาพหน้าจอด้านล่าง): หมายเหตุ: สิ่งนี้จะถือว่าคุณมีรูปแบบโหมดมืดของคุณเองอยู่แล้วสำหรับสไตล์ตัวถัง/อินพุตทั่วไป เช่น บางอย่างเช่นนี้: ตัวอย่าง: เราให้บริการคำแปลสำหรับชื่อประเทศมากกว่า 200 ชื่อ รวมถึงข้อความอินเทอร์เฟซผู้ใช้อื่นๆ (เช่น ข้อความตัวยึดตำแหน่งสำหรับการป้อนข้อมูลการค้นหาประเทศ) ในกว่า 30 ภาษา ดูตัวเลือก ภาษาที่รองรับ: อารบิก, เบงกาลี, บอสเนีย, บัลแกเรีย, คาตาลัน, จีน, โครเอเชีย, เช็ก, เดนมาร์ก, ดัตช์, นอร์เวย์, อังกฤษ, ฟาร์ซี, ฟินแลนด์, ฝรั่งเศส, เยอรมัน, กรีก, ฮินดี, ฮังการี, อินโดนีเซีย, อิตาลี, ญี่ปุ่น, เกาหลี, มราฐี , โปแลนด์, โปรตุเกส, โรมาเนีย, รัสเซีย, สโลวัก, สเปน, สวีเดน, เตลูกู, ไทย, ตุรกี, อูรดู, เวียดนาม หากปัจจุบันเราไม่รองรับภาษาที่คุณต้องการ เป็นเรื่องง่ายที่จะมีส่วนร่วมด้วยตนเอง - คุณเพียงแค่ต้องระบุสตริงการแปล UI เพียงไม่กี่รายการ เนื่องจากเราจะดึงชื่อประเทศจากโครงการรายชื่อประเทศโดยอัตโนมัติ สคริปต์ยูทิลิตี้ (build/js/utils.js) เป็นโครงสร้างที่กำหนดเองของ libphonenumber ของ Google ซึ่งเปิดใช้งานคุณลักษณะต่อไปนี้: การจัดรูปแบบ/การตรวจสอบหมายเลขระหว่างประเทศทำได้ยาก (แตกต่างกันไปตามประเทศ/เขต และปัจจุบันเรารองรับประมาณ 230 ประเทศ) โซลูชันที่ครอบคลุมเพียงอย่างเดียวที่เราพบคือ libphonenumber ซึ่งเราได้รวบรวมส่วนที่เกี่ยวข้องไว้ล่วงหน้าเป็นไฟล์ JavaScript ไฟล์เดียว ซึ่งรวมอยู่ในไดเร็กทอรี build น่าเสียดายที่แม้หลังจากแก้ไขแล้ว มันก็ยังคงมี ~260KB ดูส่วนด้านล่างเกี่ยวกับวิธีที่ดีที่สุดในการโหลด หากต้องการคอมไพล์สคริปต์ utils ใหม่ด้วยตัวเอง (เช่น เพื่ออัปเดตเวอร์ชันของ libphonenumber ที่ใช้สร้างสคริปต์นั้น) โปรดดูคำแนะนำในการสนับสนุน ดูการสนทนา v25 สคริปต์ utils มีฟังก์ชันการทำงานที่ยอดเยี่ยมมากมาย (ดูหัวข้อด้านบน) แต่มาพร้อมกับขนาดไฟล์ที่เพิ่มขึ้น (~ 260KB) มีสองวิธีหลักในการโหลดสคริปต์ utils ขึ้นอยู่กับว่าคุณกังวลเกี่ยวกับขนาดไฟล์หรือไม่ ตัวเลือกที่ 1: intlTelInputWithUtils ตัวเลือกที่ 2: loadUtilsOnInit หรือคุณสามารถตั้งค่าตัวเลือก หากคุณต้องการควบคุมได้มากขึ้นว่าเมื่อใดที่ไฟล์นี้ถูกโหลดแบบ Lazy Load คุณสามารถเรียกใช้เมธอดแบบสแตติก อินพุตแบบเต็มความกว้าง dropdownContainer: ดรอปดาวน์ไม่ปิดเมื่อเลื่อน ระยะขอบอินพุต การแสดงข้อความแสดงข้อผิดพลาด ตำแหน่งแบบเลื่อนลง ตัวยึดตำแหน่ง กลุ่มอินพุต Bootstrap ดูคำแนะนำในการตั้งค่าโปรเจ็กต์และการเปลี่ยนแปลง รวมถึงวิธีอัปเดตเป็น libphonenumber เวอร์ชันใหม่ วิธีอัปเดตอิมเมจแฟล็ก หรือวิธีเพิ่มการแปลใหม่ การทดสอบผู้ใช้ขับเคลื่อนโดยโปรแกรม BrowserStack Open-Source การทดสอบเบราว์เซอร์ผ่าน
ประเภท: String ค่าเริ่มต้น: ""
คลาสเพิ่มเติมที่จะเพิ่มลงใน wrapper (แบบฉีด)
ประเภท: 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)
ประเภท: Boolean ค่าเริ่มต้น: true
แก้ไขความกว้างของเมนูแบบเลื่อนลงเป็นความกว้างอินพุต (แทนที่จะกว้างเท่ากับชื่อประเทศที่ยาวที่สุด) เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
ประเภท: Boolean ค่าเริ่มต้น: true
จัดรูปแบบตัวเลขตามประเภทผู้ใช้โดยอัตโนมัติ คุณลักษณะนี้จะถูกปิดใช้งานหากผู้ใช้พิมพ์อักขระการจัดรูปแบบของตนเอง จำเป็นต้องโหลดสคริปต์ utils
ประเภท: Boolean ค่าเริ่มต้น: true
จัดรูปแบบค่าอินพุต (ตามตัวเลือก nationalMode ) ระหว่างการกำหนดค่าเริ่มต้น และบน setNumber จำเป็นต้องโหลดสคริปต์ utils
ประเภท: Function ชั่น ค่าเริ่มต้น: null
เมื่อตั้ง initialCountry เป็น "auto" คุณต้องใช้ตัวเลือกนี้เพื่อระบุฟังก์ชันแบบกำหนดเองที่เรียกใช้บริการค้นหา IP เพื่อรับตำแหน่งของผู้ใช้ จากนั้นเรียกใช้การเรียกกลับ success ด้วยรหัสประเทศที่เกี่ยวข้อง โปรดทราบว่าเมื่อสร้างอินสแตนซ์ของปลั๊กอิน ออบเจ็กต์ Promise จะถูกส่งกลับภายใต้คุณสมบัติอินสแตนซ์ promise ดังนั้นคุณจึงสามารถดำเนินการบางอย่างเช่น iti.promise.then(...) เพื่อทราบว่าเมื่อใดที่คำขอการเริ่มต้นเช่นนี้เสร็จสมบูรณ์ 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 เนื่องจากจะรับฟังเหตุการณ์ 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 " >
ประเภท: Object ค่าเริ่มต้น: {}
อนุญาตให้มีการแปล/ปรับแต่งชื่อประเทศมากกว่า 200 ชื่อ รวมถึงข้อความอินเทอร์เฟซผู้ใช้อื่นๆ (เช่น ข้อความตัวยึดตำแหน่งสำหรับการป้อนข้อมูลการค้นหาประเทศ) วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการนำเข้าโมดูลการแปลอันใดอันหนึ่งที่มีให้และตั้ง i18n เป็นค่านั้น (ดูตัวเลือก 1 ด้านล่าง) คุณยังสามารถแทนที่คีย์เดี่ยวอย่างน้อย 1 คีย์ได้ด้วยวิธีนี้ (ดูตัวเลือก 1 ด้านล่าง) หรือคุณสามารถจัดเตรียมคำแปลที่คุณกำหนดเองได้ (ดูตัวเลือกที่ 2 ด้านล่าง) หากคุณจัดเตรียมชื่อประเทศของคุณเอง คุณจะต้องระบุชื่อประเทศทั้งหมด (ซึ่งสามารถคัดลอกได้จากโครงการรายชื่อประเทศ เช่น นี่คือชื่อประเทศในภาษาฝรั่งเศส) รวมถึงสตริง UI บางส่วน (รายการด้านล่าง) ดูตัวอย่าง 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" ,
} ,
} ) ;
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 อย่างไร ระบบจะไม่อัปเดตการเลือกประเทศหากอินพุตมีหมายเลขที่มีรหัสการโทรระหว่างประเทศอยู่แล้ว
ประเภท: String หรือ () => Promise ค่าเริ่มต้น: "" ตัวอย่าง: "/build/js/utils.js"loadUtilsOnInit เป็น URL นั้น หรือเพียงชี้ไปที่เวอร์ชันที่โฮสต์ CDN เช่น "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" สคริปต์ถูกโหลดผ่านคำสั่งนำเข้าแบบไดนามิก ซึ่งหมายความว่า URL ไม่สามารถสัมพันธ์กันได้ - URL จะต้องเป็นแบบสัมบูรณ์{ loadUtilsOnInit: () => import("intl-tel-input/utils") }promise ดังนั้นคุณจึงสามารถดำเนินการบางอย่างเช่น iti.promise.then(callback) เพื่อทราบว่าคำขอการเริ่มต้นเช่นนี้เสร็จสิ้นเมื่อใด ดูสคริปต์ยูทิลิตี้สำหรับข้อมูลเพิ่มเติม
ประเภท: Boolean ค่าเริ่มต้น: true
จัดรูปแบบตัวเลขในรูปแบบแห่งชาติ แทนที่จะเป็นรูปแบบสากล สิ่งนี้ใช้กับหมายเลขตัวยึดตำแหน่ง และเมื่อแสดงหมายเลขที่มีอยู่ของผู้ใช้ โปรดทราบว่าผู้ใช้สามารถพิมพ์ตัวเลขในรูปแบบประเทศได้ ตราบใดที่พวกเขาเลือกประเทศที่ถูกต้อง คุณสามารถใช้ getNumber เพื่อแยกหมายเลขต่างประเทศทั้งหมดได้ ดูตัวอย่าง ขอแนะนำให้เปิดใช้งานตัวเลือกนี้ไว้ เพื่อสนับสนุนให้ผู้ใช้ป้อนหมายเลขของตนในรูปแบบประเทศ เนื่องจากโดยปกติแล้วพวกเขาจะคุ้นเคยมากกว่า ดังนั้นจึงสร้างประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น
ประเภท: Array ค่าเริ่มต้น: []
ในเมนูแบบเลื่อนลง แสดงเฉพาะประเทศที่คุณระบุ - ดูตัวอย่าง
ประเภท: String เริ่มต้น: "MOBILE"
ระบุหนึ่งในคีย์จาก enum intlTelInput.utils.numberType (เช่น "FIXED_LINE" ) เพื่อตั้งค่าประเภทตัวเลขที่จะใช้สำหรับตัวยึดตำแหน่ง เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
ประเภท: Boolean ค่าเริ่มต้น: true
ตั้งค่านี้เป็นเท็จเพื่อซ่อนธง เช่น ด้วยเหตุผลทางการเมือง แต่จะแสดงไอคอนลูกโลกทั่วไปแทน เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
ประเภท: Boolean เริ่มต้น: false
แสดงรหัสการโทรระหว่างประเทศของประเทศที่เลือกถัดจากช่องป้อนข้อมูล เพื่อให้ดูเหมือนว่าเป็นส่วนหนึ่งของหมายเลขที่พิมพ์ เนื่องจากผู้ใช้ไม่สามารถแก้ไขรหัสการโทรที่แสดงได้ พวกเขาอาจลองพิมพ์รหัสใหม่ - ในกรณีนี้ เพื่อหลีกเลี่ยงการมีรหัสการโทรสองรหัสติดกัน เราจะเปิดเมนูแบบเลื่อนลงประเทศโดยอัตโนมัติและใส่รหัสการโทรใหม่ในการป้อนข้อมูลการค้นหา แทน. ดังนั้น หากพวกเขาพิมพ์ +54 อาร์เจนตินาจะถูกไฮไลต์ในรายการแบบเลื่อนลง และพวกเขาสามารถกด Enter เพื่อเลือก โดยอัปเดตรหัสการโทรที่แสดง (คุณลักษณะนี้ต้องเปิดใช้งาน allowDropdown และ countrySearch ) เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
ประเภท: Boolean เริ่มต้น: false
ขณะที่ผู้ใช้พิมพ์อินพุต ให้ละเว้นอักขระที่ไม่เกี่ยวข้อง ผู้ใช้สามารถป้อนได้เฉพาะอักขระตัวเลขและเครื่องหมายบวกเพิ่มเติมที่จุดเริ่มต้นเท่านั้น กำหนดความยาวด้วยความยาวตัวเลขสูงสุดที่ถูกต้อง (ซึ่งคำนึงถึง validationNumberType ) จำเป็นต้องโหลดสคริปต์ utils ดูตัวอย่าง
ประเภท: Boolean ค่าเริ่มต้น: true on mobile devices, false otherwise
ควบคุมเมื่อรายชื่อประเทศปรากฏเป็นป๊อปอัปแบบเต็มหน้าจอเทียบกับรายการแบบเลื่อนลงแบบอินไลน์ ตามค่าเริ่มต้น จะปรากฏเป็นป๊อปอัปแบบเต็มหน้าจอบนอุปกรณ์เคลื่อนที่ (ขึ้นอยู่กับตัวแทนผู้ใช้และความกว้างของหน้าจอ) เพื่อใช้ประโยชน์จากพื้นที่ที่จำกัดได้ดีขึ้น (คล้ายกับวิธีการทำงานของ แบบเนทิฟ) และเป็นเมนูแบบเลื่อนลงแบบอินไลน์บน อุปกรณ์/หน้าจอขนาดใหญ่ขึ้น เล่นกับตัวเลือกนี้บน Storybook (โดยใช้ส่วนประกอบ React)
ประเภท: String หรือ () => Promise ค่าเริ่มต้น: "" ตัวอย่าง: "/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"
รับประเภท (โทรศัพท์พื้นฐาน/มือถือ/โทรฟรี ฯลฯ) ของหมายเลขปัจจุบัน จำเป็นต้องโหลดสคริปต์ utils const numberType = iti . getNumberType ( ) ;
intlTelInput.utils.numberType เช่น if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
}
FIXED_LINE_OR_MOBILE แทน
รับข้อมูลประเทศสำหรับประเทศที่เลือกในปัจจุบัน const countryData = iti . getSelectedCountryData ( ) ;
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
}
รับข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาดในการตรวจสอบ จำเป็นต้องโหลดสคริปต์ utils const error = iti . getValidationError ( ) ;
intlTelInput.utils.validationError เช่น if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
}
ตรวจสอบว่าตัวเลขปัจจุบันถูกต้องตามความยาวหรือไม่ - ดูตัวอย่าง ซึ่งน่าจะเพียงพอสำหรับกรณีการใช้งานส่วนใหญ่ ดู isValidNumberPrecise สำหรับการตรวจสอบที่แม่นยำยิ่งขึ้น แต่ข้อดีของ isValidNumber ก็คือ สามารถพิสูจน์ได้ในอนาคตมากกว่ามาก ในขณะที่ประเทศต่างๆ ทั่วโลกอัปเดตกฎตัวเลขเป็นประจำ แต่ก็แทบจะไม่เปลี่ยนความยาวของตัวเลขเลย หากวิธีนี้ส่งคืน false คุณสามารถใช้ getValidationError เพื่อรับข้อมูลเพิ่มเติมได้ เคารพตัวเลือก validationNumberType (ซึ่งตั้งค่าเป็น "MOBILE" ตามค่าเริ่มต้น) จำเป็นต้องโหลดสคริปต์ utils const isValid = iti . isValidNumber ( ) ;
true / false
ตรวจสอบว่าหมายเลขปัจจุบันถูกต้องหรือไม่โดยใช้กฎการจับคู่ที่แม่นยำสำหรับรหัสประเทศ/พื้นที่ ฯลฯ - ดูตัวอย่าง โปรดทราบว่ากฎเหล่านี้เปลี่ยนแปลงในแต่ละเดือนสำหรับประเทศต่างๆ ทั่วโลก ดังนั้นคุณต้องระมัดระวังในการอัพเดตปลั๊กอินให้เป็นปัจจุบัน ไม่เช่นนั้นคุณจะเริ่มปฏิเสธหมายเลขที่ถูกต้อง สำหรับรูปแบบการตรวจสอบที่ง่ายกว่าและรองรับในอนาคต โปรดดูที่ isValidNumber ด้านบน หากการตรวจสอบล้มเหลว คุณสามารถใช้ getValidationError เพื่อรับข้อมูลเพิ่มเติม จำเป็นต้องโหลดสคริปต์ utils const isValid = iti . isValidNumberPrecise ( ) ;
true / false
เปลี่ยนประเทศที่เลือก หากคุณจำเป็นต้องทำเช่นนี้ อาจเป็นเรื่องยากหากเกิดขึ้น เนื่องจากประเทศที่เลือกจะได้รับการอัปเดตโดยอัตโนมัติเมื่อโทรไป setNumber และส่งผ่านหมายเลขรวมทั้งรหัสการโทรระหว่างประเทศ ซึ่งเป็นการใช้งานที่แนะนำ โปรดทราบว่าคุณสามารถละเว้นอาร์กิวเมนต์รหัสประเทศเพื่อตั้งค่าประเทศให้เป็นสถานะว่างเปล่า (ลูกโลก) เริ่มต้นได้ iti . setCountry ( "gb" ) ;
ใส่ตัวเลข และอัพเดตประเทศที่เลือกตามนั้น โปรดทราบว่าหากเปิดใช้งาน formatOnDisplay การดำเนินการนี้จะพยายามจัดรูปแบบตัวเลขให้เป็นรูปแบบระดับชาติหรือนานาชาติตามตัวเลือก nationalMode iti . setNumber ( "+447733123456" ) ;
เปลี่ยนตัวเลือกตัวยึดตำแหน่งNumberType iti . setPlaceholderNumberType ( "FIXED_LINE" ) ;
อัปเดตคุณลักษณะที่ปิดใช้งานของทั้งอินพุตโทรศัพท์และปุ่มประเทศที่เลือก ยอมรับค่าบูลีน หมายเหตุ: เราขอแนะนำให้ใช้สิ่งนี้แทนการอัปเดตแอตทริบิวต์ที่ปิดใช้งานของอินพุตโดยตรง iti . setDisabled ( true ) ;
วิธีการแบบคงที่
ดึงข้อมูลประเทศของปลั๊กอิน - เพื่อนำมาใช้ซ้ำที่อื่น เช่น เพื่อสร้างรายการแบบเลื่อนลงประเทศของคุณเอง - ดูตัวอย่าง หรือคุณสามารถใช้เพื่อแก้ไขข้อมูลประเทศได้ โปรดทราบว่าต้องทำการแก้ไขใดๆ ก่อนเริ่มต้นปลั๊กอิน const countryData = intlTelInput . getCountryData ( ) ;
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ]
หลังจากเริ่มต้นปลั๊กอินแล้ว คุณสามารถเข้าถึงอินสแตนซ์ได้อีกครั้งโดยใช้วิธีนี้ เพียงส่งองค์ประกอบอินพุตที่เกี่ยวข้องเข้าไป const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc
อีกทางเลือกหนึ่งของตัวเลือก loadUtilsOnInit คือวิธีนี้ช่วยให้คุณโหลดสคริปต์ utils.js ด้วยตนเองตามความต้องการ เพื่อเปิดใช้งานการจัดรูปแบบ/การตรวจสอบความถูกต้อง ฯลฯ ดูการโหลดสคริปต์ Utilities สำหรับข้อมูลเพิ่มเติม ควรเรียกวิธีนี้เพียงครั้งเดียวต่อหน้า ออบเจ็กต์ Promise จะถูกส่งกลับ เพื่อให้คุณสามารถใช้ loadUtils().then(callback) เพื่อทราบว่าจะเสร็จสิ้นเมื่อใด {
// 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 */ } }
});"> // 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()
} ) ;
สิ่งนี้จะเกิดขึ้นเมื่อผู้ใช้เปิดเมนูแบบเลื่อนลง
สิ่งนี้จะเกิดขึ้นเมื่อผู้ใช้ปิดเมนูแบบเลื่อนลง ธีม / โหมดมืด
@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]" );
}
}
@media ( prefers-color-scheme : dark) {
body , input {
color : white;
background-color : # 0d1117 ;
}
input {
border-color : # 5b5b5b ;
}
input :: placeholder {
color : # 8d96a0 ;
}
}
การแปล
i18n สำหรับรายละเอียดเกี่ยวกับวิธีการใช้งาน ดูพวกเขาในการดำเนินการ สคริปต์ยูทิลิตี้
getNumber และ setNumberisValidNumber , getNumberType และ getValidationErrorplaceholderNumberTypegetNumber แม้ว่าจะใช้ตัวเลือก nationalMode ก็ตาม กำลังโหลดสคริปต์ยูทิลิตี้
หากคุณไม่กังวลเกี่ยวกับขนาดไฟล์ (เช่น คุณขี้เกียจโหลดสคริปต์นี้) สิ่งที่ง่ายที่สุดที่ต้องทำคือใช้บันเดิลแบบเต็ม ( /build/js/intlTelInputWithUtils.js ) ซึ่งมาพร้อมกับสคริปต์ utils รวมอยู่ด้วย สคริปต์นี้สามารถใช้ได้เหมือนกับ intlTelInput.js หลักทุกประการ ดังนั้นจึงสามารถโหลดลงบนเพจได้โดยตรง (ซึ่งกำหนด window.intlTelInput เหมือนปกติ) หรือนำเข้าได้ในลักษณะนี้: import intlTelInput from "intl-tel-input/intlTelInputWithUtils" .
หากคุณ กังวล เกี่ยวกับขนาดไฟล์ คุณสามารถโหลดสคริปต์ utils แบบขี้เกียจได้เมื่อปลั๊กอินเริ่มต้นการทำงาน โดยใช้ตัวเลือกการเริ่มต้น loadUtilsOnInit คุณจะต้องโฮสต์ไฟล์ utils.js จากนั้นตั้งค่าตัวเลือก loadUtilsOnInit เป็น URL นั้น หรือเพียงชี้ไปที่เวอร์ชันที่โฮสต์โดย CDN เช่น "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"loadUtilsOnInit ให้เป็นฟังก์ชันที่ส่งคืนสัญญาสำหรับสคริปต์ utils เป็นวัตถุโมดูล JS หากคุณใช้ Bundler เช่น Webpack, Vite หรือ Parcel เพื่อสร้างแอปของคุณ คุณสามารถใช้ Bundler ในลักษณะนี้เพื่อแยก Utilities ออกเป็น Bundle อื่นโดยอัตโนมัติ: intlTelInput ( htmlInputElement , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils)
});
loadUtils ด้วยตนเอง แทนที่จะใช้ loadUtilsOnInit การแก้ไขปัญหา
หากคุณต้องการให้อินพุตของคุณเป็นแบบความกว้างเต็ม คุณจะต้องตั้งค่าคอนเทนเนอร์ให้เหมือนกัน กล่าวคือ . iti { width : 100 % ; }
หากคุณมีคอนเทนเนอร์การเลื่อนอื่นที่ไม่ใช่ window ซึ่งทำให้เกิดปัญหาโดยไม่ปิดเมนูแบบเลื่อนลงเมื่อเลื่อน เพียงแค่ฟังเหตุการณ์การเลื่อนในองค์ประกอบนั้นและทริกเกอร์เหตุการณ์การเลื่อนบน window ซึ่งจะปิดเมนูแบบเลื่อนลงเช่น scrollingElement . addEventListener ( "scroll" , function ( ) {
const e = document . createEvent ( 'Event' ) ;
e . initEvent ( "scroll" , true , true ) ;
window . dispatchEvent ( e ) ;
} ) ;
เพื่อประโยชน์ในการจัดตำแหน่ง CSS เริ่มต้นจะบังคับให้ระยะขอบแนวตั้งของอินพุตเป็น 0px หากคุณต้องการระยะขอบแนวตั้ง คุณควรเพิ่มลงในคอนเทนเนอร์ (ด้วย class iti )
หากโค้ดการจัดการข้อผิดพลาดของคุณแทรกข้อความแสดงข้อผิดพลาดก่อน จะทำให้เลย์เอาต์เสียหาย คุณต้องแทรกมันไว้หน้าคอนเทนเนอร์แทน (ด้วยคลาส iti )
เมนูแบบเลื่อนลงควรปรากฏขึ้นด้านบน/ด้านล่างอินพุตโดยอัตโนมัติ ทั้งนี้ขึ้นอยู่กับพื้นที่ว่าง เพื่อให้ทำงานได้อย่างถูกต้อง คุณจะต้องเริ่มต้นปลั๊กอินหลังจากที่เพิ่ม ลงใน DOM แล้วเท่านั้น
หากต้องการรับตัวยึดตำแหน่งเฉพาะประเทศโดยอัตโนมัติ เพียงละเว้นแอตทริบิวต์ตัวยึดตำแหน่งบน หรือตั้งค่า autoPlaceholder เป็น "aggressive" เพื่อแทนที่ตัวยึดตำแหน่งที่มีอยู่
จำเป็นต้องมีการแก้ไข CSS สองสามรายการเพื่อให้ปลั๊กอินทำงานได้ดีกับกลุ่มอินพุต Bootstrap คุณสามารถดู Codepen ได้ที่นี่
หมายเหตุ: ขณะนี้มีข้อบกพร่องใน Mobile Safari ซึ่งทำให้เกิดข้อขัดข้องเมื่อคุณคลิกลูกศรแบบเลื่อนลง (สามเหลี่ยม CSS) ภายในกลุ่มอินพุต วิธีแก้ปัญหาที่ง่ายที่สุดคือการลบสามเหลี่ยม CSS ด้วยบรรทัดนี้: . iti__arrow { border : none; }
มีส่วนร่วม
การระบุแหล่งที่มา
ขยาย
