intl tel input
v24.7.0
الأخبار: لدينا الآن مكون Vue الخاص بنا!
الأخبار: لدينا الآن مكون React الخاص بنا! العب بها على Storybook.
️ الأخبار: نقدم الآن ترجمات بأكثر من 30 لغة! نراهم في العمل.
يعد إدخال الهاتف الدولي مكونًا إضافيًا لجافا سكريبت لإدخال أرقام الهاتف الدولية والتحقق من صحتها. فهو يأخذ حقل إدخال عادي، ويضيف قائمة منسدلة للبلد يمكن البحث فيها، ويكتشف تلقائيًا بلد المستخدم، ويعرض رقم العنصر النائب ذي الصلة، وينسق الرقم أثناء الكتابة، ويوفر طرقًا شاملة للتحقق من الصحة. يتم أيضًا تضمين مكونات React وVue.
إذا وجدت البرنامج المساعد مفيدا، يرجى النظر في دعم المشروع.
استخدم Twilio's API لإنشاء التحقق من الهاتف والرسائل النصية القصيرة 2FA وتذكيرات المواعيد وإشعارات التسويق وغير ذلك الكثير. لا يمكننا الانتظار لرؤية ما تقوم ببنائه.
نحن نوفر الآن مكونات React وVue جنبًا إلى جنب مع مكون JavaScript الإضافي العادي. هذا الملف التمهيدي مخصص لمكون JavaScript الإضافي. اعرض الملف التمهيدي React Component أو الملف التمهيدي Vue Component.
يمكنك مشاهدة عرض توضيحي مباشر والاطلاع على بعض الأمثلة حول كيفية استخدام الخيارات المتنوعة. وبدلاً من ذلك، جرب ذلك بنفسك عن طريق تنزيل المشروع وفتح ملف demo.html في المتصفح.
افتراضيًا، على الأجهزة المحمولة، نعرض نافذة منبثقة بملء الشاشة بدلاً من القائمة المنسدلة المضمنة، للاستفادة بشكل أفضل من مساحة الشاشة المحدودة. وهذا مشابه لكيفية عمل عنصر <select> الأصلي. يمكنك التحكم في هذا السلوك باستخدام خيار useFullscreenPopup . يمكن إغلاق النافذة المنبثقة إما عن طريق تحديد بلد من القائمة أو عن طريق النقر على المنطقة الرمادية على الجانبين. انظر المثال (باستخدام مكون React).
| الكروم | فايرفوكس | سفاري | حافة |
|---|---|---|---|
| ✓ | ✓ | الإصدار 14+ | ✓ |
ملاحظة: لقد قمنا الآن بإسقاط الدعم عن كافة إصدارات 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 add intl-tel-input
استيراد CSS: import 'intl-tel-input/build/css/intlTelInput.css';
قم بتعيين المسار إلى flags.webp وglobal.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.
com.containerClass
النوع: String الافتراضي: ""
فئات إضافية لإضافتها إلى الغلاف (المحقن) <div> .
CountryOrder
النوع: Array الافتراضي: null
حدد ترتيب قائمة البلدان مع مجموعة من رموز البلدان ISO2. ستظهر أي بلدان محذوفة بعد تلك المحددة، على سبيل المثال، سيؤدي تعيين countryOrder إلى ["jp", "kr"] إلى ظهور القائمة: اليابان وكوريا الجنوبية وأفغانستان وألبانيا والجزائر وما إلى ذلك...
CountrySearch
النوع: Boolean الافتراضي: true
أضف مدخل بحث إلى أعلى القائمة المنسدلة، حتى يتمكن المستخدمون من تصفية البلدان المعروضة.
customPlaceholder
النوع: Function الافتراضية: null
قم بتغيير العنصر النائب الذي تم إنشاؤه بواسطة autoPlaceholder. يجب إرجاع سلسلة.
intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ; dropdownContainer
النوع: Node الافتراضية: null
يتوقع عقدة، على سبيل المثال document.body . بدلاً من وضع علامة البلد المنسدلة بجوار الإدخال، قم بإلحاقها بالعقدة المحددة، وسيتم بعد ذلك وضعها بجوار الإدخال باستخدام JavaScript (باستخدام position: fixed ). يكون هذا مفيدًا عندما يكون الإدخال داخل حاوية بها overflow: hidden . لاحظ أن تحديد الموضع يتم كسره عن طريق التمرير، وبالتالي سيتم إغلاق القائمة المنسدلة تلقائيًا عند حدث تمرير window .
استبعاد البلدان
النوع: Array الافتراضي: []
في القائمة المنسدلة، قم بعرض جميع البلدان باستثناء تلك التي تحددها هنا. العب بهذا الخيار في Storybook (باستخدام مكون React).
FixDropdownWidth
النوع: Boolean الافتراضي: true
قم بتثبيت عرض القائمة المنسدلة على عرض الإدخال (بدلاً من أن يكون بعرض اسم البلد الأطول). العب بهذا الخيار في Storybook (باستخدام مكون React).
formatAsYouType
النوع: Boolean الافتراضي: true
تنسيق الرقم تلقائيا كما يكتب المستخدم. سيتم تعطيل هذه الميزة إذا قام المستخدم بكتابة أحرف التنسيق الخاصة به. يتطلب تحميل البرنامج النصي utils.
فورماتونديسبلاي
النوع: 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() في هذا المثال. نصيحة: قم بتخزين النتيجة في ملف تعريف الارتباط لتجنب تكرار عمليات البحث!
HiddenInput
النوع: 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 أدناه). وبدلاً من ذلك، يمكنك تقديم ترجماتك المخصصة (راجع الخيار 2 أدناه). إذا قدمت اسمك الخاص، فستحتاج إلى تحديد جميع أسماء البلدان (والتي يمكن نسخها من مشروع قائمة البلدان، على سبيل المثال، إليك أسماء البلدان باللغة الفرنسية)، بالإضافة إلى بعض سلاسل واجهة المستخدم (المدرجة أدناه). انظر المثال.
إذا لم ندعم حاليًا اللغة التي تحتاجها، فمن السهل المساهمة بذلك بنفسك - ما عليك سوى توفير عدد قليل من سلاسل ترجمة واجهة المستخدم، حيث نقوم تلقائيًا بسحب أسماء البلدان من مشروع قائمة البلدان.
الخيار 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" ,
}
} ) ; initialCountry
النوع: String الافتراضي: ""
قم بتعيين الاختيار الأولي للدولة عن طريق تحديد رمز الدولة الخاص بها، على سبيل المثال "us" للولايات المتحدة. (احذر من القيام بذلك إلا إذا كنت متأكدًا من بلد المستخدم، حيث قد يؤدي ذلك إلى مشكلات صعبة إذا تم تعيينه بشكل غير صحيح وقام المستخدم بملء رقمه الوطني تلقائيًا وإرسال النموذج دون التحقق - في بعض الحالات، يمكن أن يؤدي ذلك إلى اجتياز عملية التحقق من الصحة وقد ينتهي بك الأمر إلى تخزين رقم برمز اتصال خاطئ). يمكنك أيضًا تعيين initialCountry على "auto" ، والذي سيبحث عن بلد المستخدم بناءً على عنوان IP الخاص به (يتطلب خيار geoIpLookup - راجع المثال). لاحظ أنه على الرغم من استخدامك initialCountry ، فلن يتم تحديث اختيار البلد إذا كان الإدخال يحتوي بالفعل على رقم برمز اتصال دولي.
LoadUtilsOnInit (راجع مناقشة الإصدار 25)
النوع: 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 لا يمكن أن يكون نسبيًا - بل يجب أن يكون مطلقًا.
وبدلاً من ذلك، يمكن أن تكون هذه دالة تُرجع وعدًا لوحدة utils. عند استخدام أداة تجميع مثل Webpack، يمكن استخدام هذا لإخبار أداة التجميع بأن البرنامج النصي utils يجب الاحتفاظ به في ملف منفصل عن بقية التعليمات البرمجية الخاصة بك. على سبيل المثال: { loadUtilsOnInit: () => import("intl-tel-input/utils") } .
يتم جلب البرنامج النصي فقط عند تهيئة المكون الإضافي، بالإضافة إلى ذلك، فقط عند انتهاء تحميل الصفحة (في حدث تحميل النافذة) لمنع الحظر (البرنامج النصي هو ~260 كيلو بايت). عند إنشاء مثيل للملحق، يتم إرجاع كائن Promise ضمن خاصية مثيل promise ، لذا يمكنك القيام بشيء مثل iti.promise.then(callback) لمعرفة متى تنتهي طلبات التهيئة مثل هذه. راجع البرنامج النصي للأدوات المساعدة لمزيد من المعلومات.
الوضع الوطني
النوع: Boolean الافتراضي: true
تنسيق الأرقام بالتنسيق الوطني، بدلاً من التنسيق الدولي. وينطبق هذا على أرقام العناصر النائبة، وعند عرض الأرقام الحالية للمستخدمين. لاحظ أنه من الجيد للمستخدمين كتابة أرقامهم بالتنسيق الوطني - طالما أنهم اختاروا البلد الصحيح، يمكنك استخدام getNumber لاستخراج رقم دولي كامل - انظر المثال. يوصى بترك هذا الخيار ممكّنًا، لتشجيع المستخدمين على إدخال أرقامهم بالتنسيق الوطني لأن هذا عادةً ما يكون مألوفًا لديهم أكثر وبالتالي يخلق تجربة مستخدم أفضل.
فقطالبلدان
النوع: Array الافتراضي: []
في القائمة المنسدلة، اعرض فقط البلدان التي تحددها - راجع المثال.
placeholderNumberType
النوع: String الافتراضي: "MOBILE"
حدد أحد المفاتيح من التعداد intlTelInput.utils.numberType (على سبيل المثال "FIXED_LINE" ) لتعيين نوع الرقم الذي سيتم استخدامه للعنصر النائب. العب بهذا الخيار في Storybook (باستخدام مكون React).
showFlags
النوع: Boolean الافتراضي: true
اضبط هذا على خطأ لإخفاء الأعلام لأسباب سياسية على سبيل المثال. وبدلاً من ذلك، سيُظهر رمز الكرة الأرضية العام. العب بهذا الخيار في Storybook (باستخدام مكون React).
منفصلةDialCode
النوع: Boolean الافتراضي: false
قم بعرض رمز الاتصال الدولي للبلد المحدد بجوار الإدخال، بحيث يبدو وكأنه جزء من الرقم المكتوب. نظرًا لأن المستخدم لا يمكنه تحرير رمز الاتصال المعروض، فقد يحاول كتابة رمز جديد - في هذه الحالة، لتجنب وجود رمزي اتصال بجوار بعضهما البعض، نفتح تلقائيًا القائمة المنسدلة للدولة ونضع رمز الاتصال الجديد في مدخل البحث بدلاً من. لذا، إذا كتبوا +54، فسيتم تمييز الأرجنتين في القائمة المنسدلة ويمكنهم ببساطة الضغط على Enter لتحديده، وتحديث رمز الاتصال المعروض (تتطلب هذه الميزة تمكين allowDropdown و countrySearch ). العب بهذا الخيار في Storybook (باستخدام مكون React).
الوضع الصارم
النوع: Boolean الافتراضي: false
أثناء قيام المستخدم بكتابة الإدخال، تجاهل أي أحرف غير ذات صلة. يمكن للمستخدم فقط إدخال أحرف رقمية وعلامة زائد اختيارية في البداية. حدد الطول بالحد الأقصى لطول الرقم الصالح (وهذا ينطبق على validationNumberType ). يتطلب تحميل البرنامج النصي utils. انظر المثال.
useFullscreenPopup
النوع: Boolean الافتراضي: true on mobile devices, false otherwise
التحكم في وقت ظهور قائمة البلدان كنافذة منبثقة بملء الشاشة مقابل قائمة منسدلة مضمنة. افتراضيًا، ستظهر كنافذة منبثقة بملء الشاشة على الأجهزة المحمولة (استنادًا إلى وكيل المستخدم وعرض الشاشة)، للاستفادة بشكل أفضل من المساحة المحدودة (على غرار كيفية عمل <select> الأصلي)، وكقائمة منسدلة مضمنة على أجهزة/شاشات أكبر. العب بهذا الخيار في Storybook (باستخدام مكون React).
utilsScript
النوع: String أو () => Promise<module> الافتراضي: "" مثال: "/build/js/utils.js"
تم إهمال هذا الخيار وتمت إعادة تسميته إلى loadUtilsOnInit . يرجى الاطلاع على تفاصيل هذا الخيار واستخدامه بدلاً من ذلك.
validationNumberType
النوع: String الافتراضي: "MOBILE"
حدد أحد المفاتيح من التعداد intlTelInput.utils.numberType (على سبيل المثال "FIXED_LINE" ) لتعيين نوع الرقم الذي سيتم فرضه أثناء التحقق من الصحة باستخدام isValidNumber ، بالإضافة إلى طول الرقم الذي سيتم فرضه باستخدام strictMode . اضبطه على null لعدم فرض أي نوع معين.
في هذه الأمثلة، يشير iti إلى مثيل المكون الإضافي الذي يتم إرجاعه عند تهيئة المكون الإضافي، على سبيل المثال
const iti = intlTelInput ( input ) ; تدمير
قم بإزالة المكون الإضافي من الإدخال، وقم بإلغاء ربط أي مستمعين للأحداث.
iti . destroy ( ) ; getExtension
احصل على التمديد من الرقم الحالي. يتطلب تحميل البرنامج النصي utils.
const extension = iti . getExtension ( ) ; إرجاع سلسلة، على سبيل المثال، إذا كانت قيمة الإدخال هي "(702) 555-5555 ext. 1234" ، فسيؤدي ذلك إلى إرجاع "1234"
getNumber
احصل على الرقم الحالي بالتنسيق المحدد (الإعدادات الافتراضية لمعيار E.164). تتوفر التنسيقات المختلفة في التعداد 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 ( ) ; يُرجع عددًا صحيحًا، والذي يمكنك مطابقته مع الخيارات المتنوعة في التعداد 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
isValidNumberPrecise
تحقق مما إذا كان الرقم الحالي صالحًا باستخدام قواعد المطابقة الدقيقة لكل رمز بلد/منطقة وما إلى ذلك - راجع المثال. لاحظ أن هذه القواعد تتغير كل شهر لمختلف البلدان حول العالم، لذا عليك توخي الحذر للحفاظ على تحديث المكون الإضافي وإلا ستبدأ في رفض الأرقام الصالحة. للحصول على نموذج تحقق أبسط وأكثر ملاءمة للمستقبل، راجع isValidNumber أعلاه. إذا فشل التحقق من الصحة، يمكنك استخدام getValidationError للحصول على مزيد من المعلومات. يتطلب تحميل البرنامج النصي utils.
const isValid = iti . isValidNumberPrecise ( ) ; العوائد: true / false
setCountry
تغيير البلد المحدد. من النادر أن تحتاج إلى القيام بذلك، حيث يتم تحديث البلد المحدد تلقائيًا عند الاتصال setNumber وتمرير رقم يتضمن رمز الاتصال الدولي، وهو الاستخدام الموصى به. لاحظ أنه يمكنك حذف وسيطة رمز البلد لتعيين البلد إلى الحالة الافتراضية الفارغة (الكرة الأرضية).
iti . setCountry ( "gb" ) ; setNumber
أدخل رقمًا، وقم بتحديث الدولة المحددة وفقًا لذلك. لاحظ أنه إذا تم تمكين formatOnDisplay ، فسيحاول هذا تنسيق الرقم إما بالتنسيق الوطني أو الدولي وفقًا لخيار nationalMode .
iti . setNumber ( "+447733123456" ) ; setPlaceholderNumberType
قم بتغيير خيار العنصر النائبNumberType.
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; setDisabled
يقوم بتحديث السمة المعطلة لكل من إدخال الهاتف وزر البلد المحدد. يقبل قيمة منطقية. ملاحظة: نوصي باستخدام هذا بدلاً من تحديث السمة المعطلة للإدخال مباشرةً.
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 (راجع مناقشة الإصدار 25)
كبديل لخيار 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 */ } }
} ) ; يمكنك الاستماع إلى الأحداث التالية التي يتم تشغيلها على عنصر الإدخال.
com.countrychange
يتم تشغيل هذا عندما يتم تحديث البلد المحدد، على سبيل المثال، إذا قام المستخدم بتحديد بلد من القائمة المنسدلة، أو قام بكتابة رمز اتصال مختلف في الإدخال، أو قمت بالاتصال setCountry وما إلى ذلك.
input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;انظر مثالاً هنا: مزامنة البلد
فتح:countrydropdown
يتم تشغيل هذا عندما يفتح المستخدم القائمة المنسدلة.
إغلاق:countrydropdown
يتم تشغيل هذا عندما يقوم المستخدم بإغلاق القائمة المنسدلة.
هناك الكثير من متغيرات CSS المتاحة لهم. راجع intlTelInput.scss للحصول على القائمة الكاملة.
أما بالنسبة للحالة الفارغة (رمز الكرة الأرضية)، فإن الإصدار الافتراضي هو الرمادي الداكن، ونوفر أيضًا إصدارًا "فاتحًا"، والذي من المفترض أن يعمل بشكل أفضل مع المظهر الداكن. وبدلاً من ذلك، من السهل إعادة إنشاء أيقونة الكرة الأرضية بأي لون تحتاجه لموضوعك. ننصحك بتنزيله بأعلى دقة ممكنة، ثم تصغير حجم الصورة إلى الأحجام المطلوبة (بعرض 20 بكسل للإصدار الافتراضي وعرض 40 بكسل للإصدار @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]" );
}
}
