این افزونه برای jQuery به شما این امکان را می دهد که به طور خودکار ماسک ورودی مناسب را بر اساس ابتدای وارد شده شماره تلفن انتخاب کنید. این به شما امکان می دهد تا وارد کردن شماره تلفن در صفحه وب سایت را سریعتر و بدون خطا انجام دهید. علاوه بر این، اگر قوانین ورودی را بتوان در قالب چندین ماسک ورودی نمایش داد، افزونه توسعه‌یافته را می‌توان در مناطق دیگر نیز استفاده کرد.

معرفی

در وب سایت ها وارد کردن اطلاعات شماره تلفن بسیار ضروری است. این اتفاق افتاد که هر کشور حق دارد قوانین شماره گیری و طول شماره خود را تعیین کند، در نتیجه بین ساکنان کشورهای مختلفبه طور دوره ای سردرگمی ایجاد می شود: برخی برای نشان دادن یک عدد با رقم اول 8، برخی دیگر با رقم اول 0 و برخی دیگر با علامت + استفاده می شوند.

بررسی راه حل های موجود

برای حل پیچیدگی ایجاد شده و آوردن اعداد به یک قالب واحد، 3 راه حل اصلی وجود دارد:

1. از کاربر خواسته می شود تا با استفاده از یک ماسک ورودی شماره را وارد کند. مزیت: نمایش واضح عدد خطاهای احتمالی عدد را به حداقل می رساند. نقطه ضعف: هر کشور املا و طول شماره خود را دارد.
2. از کاربر خواسته می شود کشور را به طور جداگانه انتخاب کند و بقیه شماره را جداگانه وارد کند. احتمالاً با استفاده از ماسک ورودی مزیت: امکان استفاده از ماسک های ورودی مختلف برای کشورهای مختلف (و همچنین مناطق داخل یک کشور). معایب: فهرست کشورها (و مناطق داخل هر کشور) می تواند بزرگ باشد. شماره تلفن به طور کلی وجود ندارد (یا پیش پردازش قبل از ذخیره و نمایش شماره لازم است).
3. یک علامت + در جلوی یک عدد (خارج از ورودی) قرار دهید و فقط اجازه ورود اعداد را بدهید. مزایا: سهولت اجرا. عیب: عدم نمایش بصری عدد.

راه حل پیشنهادی

در نتیجه، تصمیم گرفته شد تا ماسک ورودی معمولی را طوری تغییر دهیم که مطابق با مقدار فعلی عدد تغییر کند. علاوه بر این، با وارد کردن شماره، از شما خواسته می شود که نام کشور تعریف شده را نمایش دهید. این رویکرد، به طور ذهنی، باید تمام معایب راه حل های فوق را برطرف کند.

با در نظر گرفتن این واقعیت که تعداد کشورهای جهان نسبتاً کم است، تصمیم گرفته شد فهرستی از ماسک های ورودی برای همه کشورها تهیه شود. اطلاعات منتشر شده در وب سایت اتحادیه بین المللی مخابرات به عنوان منبع مورد استفاده قرار گرفت.

جمع آوری این اطلاعات شگفتی های زیادی را به همراه داشت. در فرآیند جمع آوری اطلاعات، لازم بود همه موارد در نظر گرفته شود گزینه های ممکن شماره تلفن ها، از جمله در داخل کشور. با این حال، با توجه به تعداد زیادیاطلاعات دستی پردازش شده، این امکان وجود دارد که نادرستی در پایگاه داده جمع آوری شده باقی مانده باشد. برنامه ریزی شده است که در طول زمان اصلاحاتی در مجموعه اصلی انجام شود.

پیاده سازی نرم افزار

پیاده سازی jquery.inputmask که بارها در Habrahabr ذکر شد به عنوان هسته ورودی ماسک استفاده شد. این افزونه اکنون به طور فعال در حال توسعه است و علاوه بر این، به گونه ای طراحی شده است که نوشتن پسوندها برای آن بسیار آسان است. با این حال، در این کار، نوشتن چنین پسوندی تقریبا غیرممکن بود. من پلاگین اصلی را تغییر ندادم یا بازنویسی نکردم تا متناسب با نیازهایم باشد نویسنده آن همچنان فعالانه روی گسترش عملکرد کار می کند، در نتیجه ممکن است استفاده از ویرایش های من مشکل ساز شود. بنابراین، مجبور شدم یک افزونه الحاقی روی هسته اصلی بنویسم که تأثیرات خارجی را نظارت می کند (به علاوه رهگیری) و تغییرات داده ها را انجام می دهد. به منظور پیاده سازی کنترل کننده های خود تاثیرات خارجیقبل از کنترل کننده های اصلی پلاگین، از کتابخانه پلاگین jquery.bind-first استفاده می شد.

مرتب سازی ماسک های ورودی مجاز

برای انتخاب صحیح مناسب ترین ماسک ورودی، کل مجموعه ماسک ها باید به روش خاصی مرتب شوند. هنگام تدوین قوانین مرتب سازی، کنوانسیون های زیر به تصویب رسید:

1. همه کاراکترهای موجود در ماسک ورودی به 2 نوع تقسیم می شوند: نمادهای مهم(در مورد من، این نماد # است که به معنای یک رقم دلخواه و اعداد 0-9 است) و نمادهای تزئین کننده (همه بقیه).
2. یکی دیگر از تقسیم‌بندی کاراکترها در ماسک ورودی، کاراکترهای عام (در مورد من نماد # است) و بقیه است.

نتیجه قوانین مرتب سازی زیر است، به ترتیبی که آنها اعمال می شوند:

1. هنگام مقایسه 2 ماسک ورودی کاراکتر به کاراکتر، فقط کاراکترهای معنی دار (نه تزئین کننده) در نظر گرفته می شوند.
2. کاراکترهای عام متفاوت به عنوان یکسان در نظر گرفته می شوند و سایر کاراکترهای مهم بر اساس کد آنها مقایسه می شوند.
3. نمادهای غیرقابلیت همیشه کوچکتر از نمادهای قالب هستند و در نتیجه در بالاتر قرار می گیرند.
4. هر چه طول کاراکترهای مهم در ماسک ورودی کمتر باشد، ماسک ورودی کوچکتر و بالاتر است.

پیدا کردن یک ماسک ورودی مناسب

هنگام مقایسه متن ورودی با ماسک بعدی از لیست مرتب شده، فقط کاراکترهای مهم هر ماسک در نظر گرفته می شود. اگر رشته طولانی تر از ماسک ورودی باشد، حتی اگر تمام کاراکترهای قبلی تأیید شده باشند، ماسک ورودی نامعتبر در نظر گرفته می شود. اگر چندین ماسک ورودی متن ورودی را برآورده کند، اولین ماسک برگردانده می شود. علاوه بر این، در ماسک یافت شده، همه نمادهای مهم (از جمله نمادهای غیرالگو) با یک الگو جایگزین می شوند که ترکیبی از همه نمادهای مجاز توسط هر یک از نمادهای الگو است.

رسیدگی و رهگیری رویدادها

به منظور جلوگیری از درگیری با کنترل کننده رویداد هسته اصلی ماسک ورودی، رویدادهای زیر رهگیری می شوند:

• keydown- کلیدهای Backspace و Delete نظارت می شوند - به منظور تغییر ماسک ورودی فعلی قبل از اینکه کنترل کننده اصلی یک کاراکتر را از متن حذف کند. علاوه بر این، فشار دادن کلید Insert ردیابی می شود که حالت ورودی متن را برای همگام سازی تغییر می دهد.
• فشردن کلید- از آنجایی که ممکن است نویسه وارد شده توسط ماسک ورودی اصلی حل نشود (از آنجایی که همه کاراکترهای مهم در آن با یک الگو جایگزین می شوند)، باید بررسی کنید خط جدیدبرای رعایت یکی از ماسک های مجاز. اگر چنین ماسک هایی وجود نداشته باشد، ورودی کاراکتر حذف می شود، در غیر این صورت ماسک ورودی به روز می شود، پس از آن رویداد به کنترل کننده هسته ارسال می شود.
• چسباندن, ورودی- چسباندن متن از کلیپ بورد قبل از انتقال پردازش به هسته، ماسک ورودی برای خط انتخاب می شود که در نتیجه چسباندن متن از کلیپ بورد به دست آمده است. اگر امکان یافتن ماسک ورودی وجود نداشت، متن از انتها نویسه به نویسه کوتاه می شود تا زمانی که متن حداقل یک ماسک ورودی را برآورده کند. عملیات مشابهی هنگام تصحیح متن در یک فیلد ورودی با فراخوانی تابع val () و همچنین هنگام تنظیم اولیه یک ماسک ورودی در صورتی که روی یک فیلد ورودی غیر خالی اعمال شود، انجام می شود.
• کشیدن, رها کردن- پردازش شبیه به رویداد خمیر است.
• تاری - پردازش اضافیدر صورتی که حالت پاک کردن متن در هنگام از دست دادن فوکوس فعال باشد، اگر ماسک ورودی را برآورده نمی کند. این رویداد بر خلاف موارد قبلی بعد از کنترل کننده اصلی رهگیری می شود.

همه رویدادها در فضای inputmask آویزان می شوند. این امر از رفتار نادرست هنگام فراخوانی inputmask پس از مقداردهی اولیه افزونه جلوگیری می‌کند (زیرا هسته تمام کنترل‌کننده‌های نصب شده قبلی در فضای ماسک ورودی را در حین مقداردهی اولیه حذف می‌کند).

مثال استفاده

قالب لیست ماسک

فهرست ماسک‌ها آرایه‌ای از اشیاء جاوا اسکریپت است، ترجیحاً با مجموعه‌ای از ویژگی‌ها. همه اشیاء در آرایه باید حداقل یک ویژگی داشته باشند که حاوی ماسک ورودی باشد. نام پارامتر حاوی ماسک می تواند دلخواه باشد. در زیر قطعه ای از چنین آرایه ای آمده است:
[… ("Mask": "+7 (###) ### - ## - ##، "cc": "RU"، "name_en": "Russia"، "desc_en": ""، " name_ru ":" روسیه "," desc_ru ":" ")، (" mask ":" +250 (###) ### - ### "," cc ":" RW "," name_en ":" رواندا "," desc_en ":" "," name_ru ":" رواندا "," desc_ru ":" ")، (" mask ":" + 966-5 - #### - #### "," cc ":" SA "," name_en ":" عربستان سعودی "," desc_en ":" موبایل "," name_ru ":" عربستان سعودی "," desc_ru ":" موبایل ")، (" mask ":" + 966- # - ### - #### "," cc ":" SA "," name_en ":" عربستان سعودی "," desc_en ":" "," name_ru ":" عربستان سعودی "," desc_en ":" ")، ...]

پارامترهای اتصال پلاگین

قبل از اتصال، باید لیست ماسک ها را بارگیری و مرتب کنید. این کار با اجرای تابع زیر انجام می شود:
$ .masksSort = تابع (maskList، defs، match، key)

• ماسک لیست- آرایه ای از اشیاء که ماسک های ورودی را ذخیره می کنند (برای قطعه ای از یک شی، به بالا مراجعه کنید).
• defs- آرایه ای از نمادهای الگو (در مورد من نماد # است).
• همخوانی داشتن- یک عبارت منظم که کاراکترهای مهم را توصیف می کند (در مورد من، این / | # / است)؛
• کلید- نام پارامتر شی آرایه حاوی ماسک ورودی.

هنگام اتصال، یک شی خاص به پلاگین ارسال می شود که کار آن را توصیف می کند. این شیشامل مجموعه ای از پارامترهای زیر است:

• ماسک ورودی- یک شی حاوی پارامترهای ارسال شده به ماسک ورودی پلاگین اصلی.
• همخوانی داشتن- یک عبارت منظم که کاراکترهای مهم را توصیف می کند، به استثنای آنهایی که الگو هستند.
• جایگزین کردن- یک نماد الگو، که با تمام نمادهای مهم جایگزین می شود. ممکن است در تعاریف شیء inputmask وجود نداشته باشد.
• فهرست- آرایه ای از اشیاء که ماسک های ورودی را توصیف می کنند.
• listKey- نام پارامتر داخل شیئی که ماسک ورودی را ذخیره می کند.
• onMaskChange- تابعی که هنگام به روز رسانی ماسک ورودی فراخوانی می شود. به عنوان پارامتر اول، یک شی از آرایه ارسال می شود که ماسک ورودی آن با متن وارد شده مطابقت دارد، و به عنوان پارامتر دوم، دقت تعریف ماسک: درست - ماسک ورودی کاملا مطابقت دارد، نادرست - کاراکترهای اضافی مورد نیاز است. تا ماسک را به طور قابل اعتماد تعیین کنید.

برای مقداردهی اولیه افزونه، باید متد inputmasks را در فیلد ورودی اعمال کنید:
$ .fn.inputmasks = تابع (maskOpts، حالت)

• maskOpts- یک شی که کار پلاگین را توصیف می کند.
• حالت- اختیاری؛ v در حال حاضرمقدار isCompleted پشتیبانی می‌شود - در نتیجه، اگر متن مطابق با ماسک به طور کامل وارد شده باشد و در غیر این صورت نادرست، متد true را برمی‌گرداند.

مثال اتصال پلاگین

ماسک ورودی

تظاهرات

نمونه ای از نمایش پلاگین توسعه یافته در اینجا ارائه شده است

در نگاه اول، پاسخ واضح است: قسمت "شماره تلفن" را همانطور که لازم است علامت بزنید. اما جاهایی وجود دارد که کاربر می تواند سایت را به دلیل فیلدهای غیر ضروری ترک کند. به عنوان مثال، اپلیکیشن ها، نرم افزارها، سایت های فروش محتوا. با این حال، شماره کاربر برای چنین پروژه هایی به عنوان داده های اضافی مهم است که امکان تعامل با مشتریان بالقوه را در آینده فراهم می کند. علاوه بر این، یک راه حل ساده و موثر وجود دارد - استفاده از ماسک ورودی. اجازه دهید آن را با مطالعات موردی ثابت کنیم.

چرا به ماسک ورودی نیاز دارید؟

ماسک ورودی نشان می دهد که در چه قالبی باید داده ها را در فیلد وارد کنید. برای مثال، اگر کاربری شماره تلفنی را بدون کد منطقه یا شماره تلفنی را در قسمت آدرس وارد کند، نمی‌تواند به مورد بعدی ادامه دهد. ماسک موجود در فرم ها ظاهری یکنواخت برای داده های ورودی ارائه می دهد که یافتن و مدیریت پایگاه داده را آسان تر می کند. در توصیه های Netpeak، ماسک ورودی شماره تلفن یک عنصر اجباری در فرم سفارش در وب سایت است. مانند هر توصیه عملی متخصصان ما، این موقعیت نیز بر اساس موارد مشتری موفق است.

از آنجایی که سایت تخصصی اپلیکیشن بود، فیلد وارد کردن شماره در سایت اختیاری بود. برای پیگیری تغییر درصد مشتریانی که فیلد «تلفن» را در فرم سفارش در سایت پر می کنند، یک متغیر سفارشی در تجزیه و تحلیل ترافیک گوگل... در ماه فوریه، هیچ یک از 9 مشتری فیلد "تلفن" را پر نکردند. در ماه مارس، ماسک ورودی را معرفی کردیم و کاربران شروع به پر کردن آن کردند. برای خلوص آزمایش، میدان اختیاری گذاشته شد و هیچ تغییر دیگری ایجاد نشد.
نتایج مارس - شماره 19 با 22 کاربر که برنامه را پر کردند. به عبارت دیگر، 85 درصد از کاربرانی که اپلیکیشن را سفارش داده اند، شماره تلفن خود را ترک کرده اند.

مطالعه موردی سایت مرکز اطلاع رسانی: افزایش تعداد پرکردن فیلد شماره تلفن به میزان 15.4 درصد

سایت مشتری مشغول نوشتن مقاله، ترم، پایان نامه و کارهای دیگر است. شماره تلفن کاربر برای ارتباط مطلوب است، اما در سایت این قسمت اختیاری بود. کاربر نمی تواند فرم را پر کند یا چیزی در این قسمت بنویسد. همانطور که اولین بار، در مرحله اول ما ردیابی پر شدن فیلد "تلفن" را در Google Analytics نصب کردیم. در ماه نوامبر، از 59 درخواست ارسال شده توسط بازدیدکنندگان سایت، 15 درخواست شامل شماره نبود. یعنی شرکت تنها 74.6 درصد از فرم های ارسالی را با شماره تکمیل شده دریافت کرده است. سپس یک ماسک ورودی به فیلد تلفن اضافه کردیم. در ماه دسامبر، این سایت 60 برنامه دریافت کرد. با این حال، تنها 6 فرم تکمیل شده شامل شماره تلفن مشتری نبود. در نتیجه، 90٪ از فرم های سفارش ارسال شده حاوی یک فیلد "تلفن" است که به درستی پر شده است. در طول ماه - افزایش 15.4٪، تنها به دلیل معرفی ماسک برای وارد کردن اعداد. سرانجام - پرونده داخلی آژانس.

فیلد اعداد در فرم سفارش در وب سایت Netpeak نیز اختیاری است. اما شماره تلفن ها برای اینکه مشتریان همیشه از شماره و وضعیت درخواست خود مطلع شوند (این داده ها را از طریق پیامک ارسال می کنیم) و همچنین برای بهینه سازی کار مدیران حساب اهمیت دارند. دوره آزمایش مانند نمونه های قبلی دو ماه است. در نتیجه ظهور ماسک برای وارد کردن اعداد، درصد پر کردن فرم ها از 44٪ به 83٪ افزایش یافت - 39.4٪.
پس از انجام آزمایش، ماسکی را در سایت پیاده سازی کردیم. فیلد برای وارد کردن شماره اختیاری باقی می ماند. این برنامه تنها در صورت وارد کردن شماره نادرست در این قسمت عبور نخواهد کرد. در این حالت، اولین رقم های ماسک بسته به کشوری که کاربر سایت در آن قرار دارد، تغییر می کند. اگر در مورد فرم پیش سفارش صحبت می کنیم، جالب است بدانید که برنامه با شماره تلفن چقدر بهتر است. ما تمام برنامه‌هایی را که تا به حال از طریق فرم پیش‌سفارش دریافت کرده‌ایم، دریافت کردیم و درصد آن‌هایی را که بدون شماره و با آن به مشتری تبدیل شدند، محاسبه کردیم. دومی با 0.81 درصد بیشترین میزان را داشت.

نتیجه: اگر شخصی شماره خود را در فرم برای شما بگذارد، این تضمینی برای انتقال وجه نیست.

اگر در مورد شکل پیش‌سفارش صحبت کنیم، تمرکز بر امکانات فعال‌سازی مجدد مشتریان است، فرصت‌هایی که برای بازاریابان مسلح به پایگاهی از شماره تلفن شخصی کاربران باز می‌شود. در یکی از پست های جدید در مورد موارد فعال سازی مجدد موفق به شما خواهیم گفت. در ضمن به شما توصیه می کنیم قبل از هر اقدامی با شماره تلفن های موجود در پایگاه اطلاعاتی در مورد اقداماتی که باید انجام دهید را مطالعه کنید. تجربه خود را در اجرای ماسک ورودی شماره تلفن و مشاهده کیفیت درخواست های دریافتی در نظرات به اشتراک بگذارید.