کتابخانه
intl-tel-input یه کتابخونه جاوااسکریپت برای فیلد شماره تلفن بین المللیه. کنار input یه منوی انتخاب کشور با پرچم و پیش شماره می ذاره، شماره رو موقع تایپ قالب بندی می کنه و درستی اش رو هم چک می کنه. برای فرم های ثبت نام، تماس، سفارش و تایید پیامکی خیلی به کار میاد.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۲٫۴ مگابایت· ۸۸ فایل· انتشار
SHA-256: a0606b026897508dc260c9f1739fa3e80e6f43435458d08171a416026f86d488
فیلد شماره تلفن توی فرم ها همیشه دردسر داره. یکی با +98 شروع می کنه، یکی با 0098، یکی با 09، یکی دیگه هم وسطش فاصله و خط تیره می ذاره. اگه سایتت مشتری خارجی هم داشته باشه، وضع بدتر می شه، چون کاربر نمی دونه پیش شماره کشورش رو چطور بنویسه. intl-tel-input دقیقاً برای همین ساخته شده. یه کتابخونه جاوااسکریپت با مجوز MIT که یه input ساده رو به ورودی شماره تلفن بین المللی تبدیل می کنه.
کارش از بیرون ساده است. کنار فیلد یه منوی انتخاب کشور با پرچم اضافه می کنه، پیش شماره رو مدیریت می کنه و شماره رو موقع تایپ قالب بندی می کنه. اعتبارسنجی هم داره. قالب بندی و اعتبارسنجی دقیق به یه اسکریپت کمکی جدا تکیه داره که بر پایه libphonenumber گوگله. این اسکریپت از خود کتابخونه سنگین تره و معمولاً فقط وقتی لازم باشه بارگذاری می شه. نسخه های فعلی به jQuery نیاز ندارن و برای React و Vue و Angular هم معمولاً بسته های آماده پیدا می شه.
کجا به کارت میاد؟ فرم ثبت نام سایت هایی که کد تایید پیامکی می فرستن، تسویه حساب فروشگاه هایی که به خارج از ایران هم ارسال دارن، فرم تماس شرکت هایی که مشتری خارجی دارن، و هر جایی که شماره باید با فرمت استاندارد ذخیره بشه. کجا نه؟ اگه سایتت فقط مخاطب ایرانی داره و فقط موبایل ایرانی می گیری، یه input ساده با چک کردن الگوی شماره سبک تر و کافیه. منوی پرچم برای کاربری که هیچ وقت کشورش رو عوض نمی کنه فقط شلوغی اضافه می کنه.
چند نکته هست که زود به کارت میاد. اول اینکه اعتبارسنجی فقط قالب و طول شماره رو نسبت به کشور انتخاب شده چک می کنه و نمی گه شماره واقعاً فعاله. برای جاهای حساس هنوز تایید پیامکی لازمه. دوم اینکه شماره رو با پیش شماره و در قالب بین المللی ذخیره کن، تا بعداً موقع ارسال پیامک سردرگم نشی. سوم اینکه توی صفحه های راست به چپ، جای منوی پرچم و padding فیلد ممکنه یه تغییر کوچک توی CSS بخواد. چهارم اینکه سمت سرور هم دوباره شماره رو بررسی کن، چون هر چیزی که مرورگر چک کنه رو می شه دور زد.
نسخه های رسمی و بدون تغییر intl-tel-input توی مخزن داخلی ما هم هست. اگه روزی npm یا CDN های خارجی در دسترس نبودن، فایل ها رو از همین جا بگیر و روی هاست خودت بذار.
راه انداختن intl-tel-input چند قدم بیشتر نداره و لازم نیست برای هیچ کدوم سراغ منبع خارجی بری.
اگه پرچم ها یا اسکریپت کمکی از آدرس خارجی لود بشن، توی روزهای محدودیت اینترنت بین الملل ممکنه نیان. پس همه فایل ها رو از هاست خودت سرو کن و بعد از راه اندازی، یه بار سایت رو بدون اینترنت بین الملل تست کن.
یه کتابخونه جاوااسکریپته که فیلد شماره تلفن رو به ورودی بین المللی تبدیل می کنه. یه منوی انتخاب کشور با پرچم و پیش شماره کنار input می ذاره، شماره رو قالب بندی می کنه و اعتبارسنجی هم داره. توی فرم های ثبت نام، سفارش و تایید پیامکی زیاد استفاده می شه.
بله، چون یه کتابخونه جاوااسکریپته و به وردپرس وابسته نیست. فایل ها رو توی قالب یا یه افزونه بارگذاری کن و روی فیلد تلفن فعالش کن. بعضی افزونه های فرم و تسویه حساب خودشون ازش استفاده می کنن، پس قبل از کدنویسی توضیحات افزونه ات رو ببین.
اگه همه فایل ها رو روی هاست خودت بذاری، بله. خود کتابخونه، استایل، تصویر پرچم ها و اسکریپت کمکی باید از سرور داخلی لود بشن. اگه هر کدوم از یه CDN خارجی بیاد، توی روزهای محدودیت ممکنه فیلد ناقص نمایش داده بشه.
نه. اعتبارسنجی فقط چک می کنه شماره از نظر قالب و طول با کشور انتخاب شده جور باشه. اینکه خط فعاله یا مال خود کاربره رو نمی فهمه. برای اطمینان واقعی باید کد تایید پیامکی بفرستی و سمت سرور هم شماره رو دوباره بررسی کنی.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.