jQuery-ის ეს დანამატი საშუალებას გაძლევთ ავტომატურად აირჩიოთ შესაბამისი შეყვანის ნიღაბი ტელეფონის ნომრის შეყვანილი დასაწყისიდან გამომდინარე. ეს გაძლევთ საშუალებას გახადოთ ტელეფონის ნომრის შეყვანა ვებსაიტის გვერდზე უფრო სწრაფად და უშეცდომოდ. გარდა ამისა, განვითარებული დანამატი შეიძლება გამოყენებულ იქნას სხვა სფეროებში, თუ შეყვანის წესები შეიძლება წარმოდგენილი იყოს რამდენიმე შეყვანის ნიღბის სახით.

შესავალი

საიტებზე ძალიან აუცილებელია ტელეფონის ნომრის ინფორმაციის შეყვანა. მოხდა ისე, რომ თითოეულ ქვეყანას აქვს უფლება დაადგინოს აკრეფის საკუთარი წესები და ნომრის სიგრძე, რის შედეგადაც მოსახლეობას შორის სხვა და სხვა ქვეყნებიპერიოდულად წარმოიქმნება დაბნეულობა: ზოგი გამოიყენება რიცხვის მითითებას 8-ით, ზოგი - 0-ით, ზოგი კი + ნიშნით.

არსებული გადაწყვეტილებების მიმოხილვა

იმისათვის, რომ როგორმე გადავჭრათ წარმოქმნილი სირთულე და მივიყვანოთ რიცხვები ერთ ფორმატში, არსებობს 3 ძირითადი გამოსავალი:

1. მომხმარებელს სთხოვს შეიყვანოს ნომერი შეყვანის ნიღბის გამოყენებით. უპირატესობა: ნომრის მკაფიო ჩვენება ამცირებს შესაძლო ნომრის შეცდომებს. მინუსი: თითოეულ ქვეყანას აქვს თავისი მართლწერა და რიცხვის სიგრძე.
2. მომხმარებელს სთხოვენ ცალკე შეარჩიოს ქვეყანა და ცალკე შეიყვანოს დანარჩენი ნომერი; შესაძლოა შეყვანის ნიღბის გამოყენებით. უპირატესობა: სხვადასხვა ქვეყნისთვის (ასევე ქვეყნის შიგნით რეგიონებისთვის) სხვადასხვა შეყვანის ნიღბების გამოყენების შესაძლებლობა. ნაკლოვანებები: ქვეყნების სია (და რეგიონები თითოეულ ქვეყანაში) შეიძლება იყოს დიდი; ტელეფონის ნომერი წყვეტს არსებობას მთლიანობაში (ან წინასწარ დამუშავებაა საჭირო ნომრის შენახვამდე და ჩვენებამდე).
3. მოათავსეთ + ნიშანი რიცხვის წინ (შეყვანის გარეთ) და დაუშვით მხოლოდ რიცხვების შეყვანა. უპირატესობები: განხორციელების სიმარტივე. მინუსი: ნომრის ვიზუალური ჩვენების ნაკლებობა.

Შემოთავაზებული გადაწყვეტა

შედეგად, გადაწყდა ჩვეულებრივი შეყვანის ნიღბის შეცვლა ისე, რომ ის შეიცვალოს ნომრის მიმდინარე მნიშვნელობის შესაბამისად. გარდა ამისა, ნომრის შეყვანისას მოგეთხოვებათ განსაზღვრული ქვეყნის სახელის ჩვენება. Ეს მიდგომა, სუბიექტურად, უნდა გადაჭრას ზემოაღნიშნული გადაწყვეტილებების ყველა უარყოფითი მხარე.

იმის გათვალისწინებით, რომ მსოფლიოში ქვეყნების რაოდენობა შედარებით მცირეა, გადაწყდა ყველა ქვეყნისთვის შეყვანილი ნიღბების ჩამონათვალის შედგენა. წყაროდ გამოიყენეს საერთაშორისო სატელეკომუნიკაციო კავშირის ვებგვერდზე გამოქვეყნებული ინფორმაცია.

ამ ინფორმაციის შეგროვებამ ბევრი სიურპრიზი გამოიწვია. ინფორმაციის შეგროვების პროცესში საჭირო იყო ყველა შესაძლო ვარიანტები ტელეფონის ნომრებიმათ შორის ქვეყნის შიგნითაც. თუმცა, იმის გათვალისწინებით დიდი რიცხვიხელით დამუშავებული ინფორმაცია, შესაძლებელია შეგროვებულ მონაცემთა ბაზაში დარჩეს უზუსტობები. დაგეგმილია დროთა განმავლობაში ორიგინალურ კომპლექტში შესწორება.

პროგრამული უზრუნველყოფის დანერგვა

jquery.inputmask იმპლემენტაცია, რომელიც არაერთხელ იყო ნახსენები Habrahabr-ზე, გამოიყენებოდა შეყვანის ნიღბის ბირთვად. ეს მოდული ახლა აქტიურად ვითარდება და, უფრო მეტიც, შექმნილია ისე, რომ მისთვის საკმაოდ მარტივია გაფართოებების დაწერა. თუმცა, ამ ამოცანაში, თითქმის შეუძლებელი აღმოჩნდა ასეთი გაფართოების დაწერა. მე არ შევცვალე ან გადავიწერე ორიგინალური მოდული ჩემს საჭიროებებზე, რადგან მისი ავტორი აგრძელებს აქტიურ მუშაობას ფუნქციონირების გაფართოებაზე, რის შედეგადაც ჩემი რედაქტირების გამოყენება შეიძლება პრობლემური აღმოჩნდეს. ამიტომ, მე მომიწია დამატებითი მოდულის დაწერა მთავარ ბირთვზე, რომელიც მონიტორინგს უწევს (პლუს კვეთს) გარე გავლენებს და ახდენს მონაცემების მოდიფიკაციას. თქვენი დამმუშავებლების განსახორციელებლად გარე გავლენებიძირითადი დანამატების დამმუშავებლამდე გამოყენებული იყო jquery.bind-first დანამატის ბიბლიოთეკა.

დაშვებული შეყვანის ნიღბების დახარისხება

ყველაზე შესაფერისი შეყვანის ნიღბის სწორად შერჩევისთვის, ნიღბების მთელი ნაკრები უნდა იყოს დალაგებული სპეციალური გზით. დახარისხების წესების შემუშავებისას მიღებულ იქნა შემდეგი კონვენციები:

1. შეყვანის ნიღბის ყველა სიმბოლო იყოფა 2 ტიპად: მნიშვნელოვანი სიმბოლოები(ჩემს შემთხვევაში, ეს არის # სიმბოლო, რაც ნიშნავს თვითნებურ ციფრს და რიცხვებს 0-9) და დეკორატორის სიმბოლოებს (ყველა დანარჩენი).
2. სიმბოლოების კიდევ ერთი დაყოფა შეყვანის ნიღბში არის wildcard სიმბოლოები (ჩემს შემთხვევაში ეს არის # სიმბოლო) და ყველა დანარჩენი.

შედეგი არის შემდეგი დახარისხების წესები, მათი გამოყენების თანმიმდევრობით:

1. 2 შეყვანის ნიღბის შედარებისას სიმბოლოების მიხედვით, მხედველობაში მიიღება მხოლოდ მნიშვნელოვანი სიმბოლოები (არა დეკორატორები).
2. სხვადასხვა სიმბოლოები განიხილება, როგორც თანაბარი, და სხვა მნიშვნელოვანი სიმბოლოები შედარებულია მათი კოდის მიხედვით.
3. შაბლონის გარეშე სიმბოლოები ყოველთვის უფრო მცირეა ვიდრე შაბლონები და, შედეგად, უფრო მაღლა მდებარეობს.
4. რაც უფრო მოკლეა მნიშვნელოვანი სიმბოლოების სიგრძე შეყვანის ნიღაბში, მით უფრო მცირეა შეყვანის ნიღაბი და უფრო მაღალია.

შესაფერისი შეყვანის ნიღბის პოვნა

შეყვანის ტექსტის შედარებისას დალაგებული სიიდან მომდევნო ნიღაბთან, მხედველობაში მიიღება თითოეული ნიღბის მხოლოდ მნიშვნელოვანი სიმბოლოები. თუ სტრიქონი უფრო გრძელია, ვიდრე შეყვანის ნიღაბი, მიუხედავად იმისა, რომ ყველა წინა სიმბოლო დამოწმებულია, შეყვანის ნიღაბი ითვლება არასწორი. თუ შეყვანის რამდენიმე ნიღაბი აკმაყოფილებს შეყვანის ტექსტს, მათგან პირველი ბრუნდება. გარდა ამისა, აღმოჩენილ ნიღაბში ყველა მნიშვნელოვანი სიმბოლო (მათ შორის არა შაბლონი) ჩანაცვლებულია შაბლონით, რომელიც წარმოადგენს შაბლონის რომელიმე სიმბოლოს მიერ დაშვებული ყველა სიმბოლოს კომბინაციას.

მოვლენების მართვა და თვალთვალი

შეყვანის ნიღბის ძირითადი ბირთვის მოვლენის დამმუშავებლებთან კონფლიქტის თავიდან ასაცილებლად, შემდეგი მოვლენების ჩარევა ხდება:

• keydown- Backspace და Delete keystrokes მონიტორინგი ხდება - იმისათვის, რომ შეიცვალოს მიმდინარე შეყვანის ნიღაბი, სანამ მთავარი დამმუშავებელი წაშლის ერთ სიმბოლოს ტექსტიდან. გარდა ამისა, ხდება ჩასმა კლავიშის დაჭერის თვალყურის დევნება, რომელიც ცვლის ტექსტის შეყვანის რეჟიმს სინქრონიზაციისთვის.
• ღილაკზე დაჭერა- ვინაიდან შეყვანილი სიმბოლო შეიძლება არ გადაწყდეს ორიგინალური შეყვანის ნიღბით (რადგან მასში არსებული ყველა მნიშვნელოვანი სიმბოლო ჩანაცვლებულია შაბლონით), თქვენ უნდა შეამოწმოთ ახალი ხაზიდააკმაყოფილოს ერთ-ერთი ნებადართული ნიღაბი. თუ ასეთი ნიღბები არ არის, მაშინ სიმბოლოების შეყვანა უქმდება, წინააღმდეგ შემთხვევაში შეყვანის ნიღაბი განახლდება, რის შემდეგაც მოვლენა გადაეცემა ბირთვის დამმუშავებელს.
• პასტა, შეყვანა- ტექსტის ჩასმა ბუფერიდან. დამუშავების ბირთვში გადატანამდე, შეყვანის ნიღაბი შეირჩევა ხაზისთვის, რომელიც მიღებულია ბუფერიდან ტექსტის ჩასმის შედეგად. თუ შეყვანის ნიღბის პოვნა ვერ მოხერხდა, ტექსტი იკვეხება სიმბოლოებით ბოლოდან, სანამ ტექსტი არ დააკმაყოფილებს მინიმუმ ერთ შეყვანის ნიღაბს. ანალოგიური ოპერაცია ხორციელდება შეყვანის ველში ტექსტის გასწორებისას val () ფუნქციის გამოძახებით, ასევე შეყვანის ნიღბის ინიციალიზაციისას, თუ იგი გამოიყენება არაცარიელ შეყვანის ველზე.
• ჩამოაგდე, ჩამოაგდეს- დამუშავება პასტის მოვლენის მსგავსია.
• დაბინდვა - დამატებითი დამუშავებათუ ჩართულია ტექსტის გასუფთავების რეჟიმი ფოკუსის დაკარგვაზე, თუ ის არ აკმაყოფილებს შეყვანის ნიღაბს. ეს მოვლენის ჩაჭრა ხდება მთავარი დამმუშავებლის შემდეგ, წინა მოვლენებისგან განსხვავებით.

ყველა ღონისძიება ჩამოკიდებულია შეყვანის ნიღბის სივრცეში. ეს თავიდან აიცილებს არასწორ ქცევას inputmask-ის გამოძახებისას დანამატის ინიციალიზაციის შემდეგ (რადგან ბირთვი აშორებს ყველა ადრე დაყენებულ დამმუშავებელს შეყვანის ნიღბის სივრცეში ინიციალიზაციის დროს).

გამოყენების მაგალითი

ნიღბის სიის ფორმატი

ნიღბების სია არის JavaScript ობიექტების მასივი, სასურველია თვისებების იგივე ნაკრებით. მასივის ყველა ობიექტს უნდა ჰქონდეს მინიმუმ ერთი თვისება, რომელიც შეიცავს შეყვანის ნიღაბს. ნიღბის შემცველი პარამეტრის სახელი შეიძლება იყოს თვითნებური. ქვემოთ მოცემულია ასეთი მასივის ფრაგმენტი:
[… ("ნიღაბი": "+7 (###) ### - ## - ##", "cc": "RU", "name_en": "Russia", "desc_en": "", " name_ru ":" რუსეთი "," desc_ru ":" "), (" ნიღაბი ":" +250 (###) ### - ### "," cc ":" RW "," name_en ":" რუანდა "," desc_en ":" "," name_ru ":" რუანდა "," desc_ru ":" "), (" mask ":" + 966-5 - #### - #### "," cc ":" SA "," name_en ":" საუდის არაბეთი "," desc_en ":" მობილური "," name_ru ":" საუდის არაბეთი "," desc_ru ":" მობილური "), (" ნიღაბი ":" + 966- # - ### - #### "," cc ":" SA "," name_en ":" საუდის არაბეთი "," desc_en ":" "," name_ru ":" საუდის არაბეთი "," desc_ru ":" "), ...]

დანამატის კავშირის პარამეტრები

დაკავშირებამდე, თქვენ უნდა ჩატვირთოთ და დაალაგოთ ნიღბების სია. ეს კეთდება შემდეგი ფუნქციის შესრულებით:
$ .masksSort = ფუნქცია (maskList, defs, match, key)

• ნიღბის სია- ობიექტების მასივი, რომელიც ინახავს შეყვანის ნიღბებს (ობიექტის ფრაგმენტისთვის იხილეთ ზემოთ);
• დეფს- შაბლონის სიმბოლოების მასივი (ჩემს შემთხვევაში ეს არის # სიმბოლო);
• მატჩი- რეგულარული გამოხატულება, რომელიც აღწერს მნიშვნელოვან სიმბოლოებს (ჩემს შემთხვევაში ეს არის / | # /);
• გასაღები- მასივის ობიექტის პარამეტრის სახელი, რომელიც შეიცავს შეყვანის ნიღაბს.

როდესაც დაკავშირებულია, სპეციალური ობიექტი გადაეცემა დანამატს, რომელიც აღწერს მის მუშაობას. ეს ობიექტიშეიცავს პარამეტრების შემდეგ კომპლექტს:

• შეყვანის ნიღაბი- ობიექტი, რომელიც შეიცავს პარამეტრებს, გადაცემულია ძირითადი დანამატის შეყვანის ნიღაბზე;
• მატჩი- რეგულარული გამოხატულება, რომელიც აღწერს მნიშვნელოვან სიმბოლოებს, შაბლონების გამოკლებით;
• ჩანაცვლება- შაბლონის სიმბოლო, რომელიც შეიცვლება ყველა მნიშვნელოვანი სიმბოლოთი; შეიძლება არ იყოს წარმოდგენილი inputmask ობიექტის განმარტებებში;
• სია- ობიექტების მასივი, რომელიც აღწერს შეყვანის ნიღბებს;
• listKey- პარამეტრის სახელი ობიექტის შიგნით, რომელიც ინახავს შეყვანის ნიღაბს;
• onMaskChange-ზე- ფუნქცია, რომელიც გამოიძახება შეყვანის ნიღბის განახლებისას; როგორც პირველ პარამეტრს, გადაეცემა მასივიდან ობიექტი, რომლის შეყვანის ნიღაბი შეესაბამება შეყვანილ ტექსტს, ხოლო მეორედ, ნიღბის განმარტების სიზუსტე: true - შეყვანის ნიღაბი სრულად ემთხვევა, false - საჭიროა დამატებითი სიმბოლოები. ნიღბის საიმედოდ განსაზღვრა.

მოდულის ინიციალიზაციისთვის, თქვენ უნდა გამოიყენოთ inputmasks მეთოდი შეყვანის ველში:
$ .fn.inputmasks = ფუნქცია (maskOpts, რეჟიმი)

• maskOpts- ობიექტი, რომელიც აღწერს მოდულის მუშაობას;
• რეჟიმი- სურვილისამებრ; ვ ამჟამადმხარდაჭერილია isCompleted მნიშვნელობა - შედეგად, მეთოდი აბრუნებს true, თუ შესატყვისი ნიღბის შესატყვისი ტექსტი სრულად არის შეყვანილი, წინააღმდეგ შემთხვევაში კი false.

დანამატის კავშირის მაგალითი

შეყვანის ნიღაბი

დემონსტრაცია

განვითარებული მოდულის დემონსტრირების მაგალითი წარმოდგენილია აქ

ერთი შეხედვით პასუხი აშკარაა: მონიშნეთ ველში „ტელეფონის ნომერი“, როგორც საჭიროა. მაგრამ არის ნიშები, რომლებშიც მომხმარებელს შეუძლია დატოვოს საიტი არასაჭირო საჭირო ველების გამო. მაგალითად, აპლიკაციები, პროგრამული უზრუნველყოფა, კონტენტის გაყიდვის საიტები. თუმცა, ასეთი პროექტების მომხმარებლის ნომრები მნიშვნელოვანია, როგორც დამატებითი მონაცემები, რომლებიც შესაძლებელს გახდის მომავალში პოტენციურ მომხმარებლებთან ურთიერთობას. უფრო მეტიც, არსებობს მარტივი და ეფექტური გამოსავალი - შეყვანის ნიღბის გამოყენება. მოდით დავამტკიცოთ ეს საქმის შესწავლით.

რატომ გჭირდებათ შეყვანის ნიღაბი?

შეყვანის ნიღაბი აჩვენებს, თუ რა ფორმატში გჭირდებათ მონაცემების შეყვანა ველში. მაგალითად, თუ მომხმარებელი შეიყვანს ტელეფონის ნომერს რეგიონის კოდის გარეშე, ან ტელეფონის ნომერს მისამართის ველში, ის ვერ შეძლებს შემდეგ პუნქტზე გადასვლას. ფორმებში ნიღაბი უზრუნველყოფს შეყვანის მონაცემების ერთგვაროვან სახეს, რაც აადვილებს მონაცემთა ბაზის მოძიებას და მართვას. Netpeak-ის რეკომენდაციებში ტელეფონის ნომრის შეყვანის ნიღაბი არის ვებსაიტზე შეკვეთის ფორმის სავალდებულო ელემენტი. ჩვენი სპეციალისტების ნებისმიერი პრაქტიკული რეკომენდაციის მსგავსად, ეს პოზიციაც წარმატებული კლიენტის შემთხვევებზეა დაფუძნებული.

ვინაიდან საიტი სპეციალიზირებულია აპლიკაციებში, საიტზე ნომრის შეყვანის ველი არჩევითი იყო. იმისათვის, რომ თვალყური ადევნოთ იმ მომხმარებლების პროცენტულ ცვლილებას, რომლებიც ავსებენ "ტელეფონის" ველს შეკვეთის ფორმაში საიტზე, ჩვენ გამოვიყენეთ მორგებული ცვლადი Google ანალიტიკა... თებერვალში ცხრა კლიენტიდან არცერთმა არ შეავსო ველი „ტელეფონი“. მარტში შემოვიყვანეთ შეყვანის ნიღაბი და მომხმარებლებმა დაიწყეს მისი შევსება. ექსპერიმენტის სიწმინდისთვის ველი დარჩა სურვილისამებრ და სხვა ცვლილებები არ განხორციელებულა.
მარტის შედეგი - 19 ნომერი 22 მომხმარებელთან, რომლებმაც შეავსეს აპლიკაცია. სხვა სიტყვებით რომ ვთქვათ, მომხმარებელთა 85%-მა, ვინც შეუკვეთა აპლიკაცია, დატოვა ტელეფონის ნომერი.

საინფორმაციო ცენტრის ვებგვერდის შემთხვევის შესწავლა: ტელეფონის ნომრის ველში შევსების რაოდენობის ზრდა 15.4%-ით.

კლიენტის საიტი დაკავებულია ესეების, საკურსო ნაშრომების, ნაშრომების და სხვა სამუშაოების წერით. მომხმარებლის ტელეფონის ნომერი სასურველია კომუნიკაციისთვის, მაგრამ საიტზე ეს ველი არასავალდებულო იყო. მომხმარებელმა ვერ შეძლო ფორმის შევსება ან რაიმეს დაწერა ამ ველში. ისევე როგორც პირველად, პირველ ეტაპზე დავაინსტალირეთ გუგლ ანალიტიკაში „ტელეფონის“ ველის შევსების თრექინგი. ნოემბერში საიტის ვიზიტორების მიერ შემოსული 59 განაცხადიდან 15 არ შეიცავდა ნომრებს. ანუ კომპანიამ შემოსული ფორმების მხოლოდ 74,6% მიიღო შევსებული ნომრით. შემდეგ ტელეფონის ველს დავამატეთ შეყვანის ნიღაბი. დეკემბერში საიტმა 60 განაცხადი მიიღო. თუმცა, მხოლოდ 6 შევსებულ ფორმას არ ეწერა კლიენტის ტელეფონის ნომერი. შესაბამისად, წარმოდგენილი შეკვეთის ფორმების 90% შეიცავდა სწორად შევსებულ ველს „ტელეფონი“. თვის განმავლობაში - მატება 15,4%-ით, მხოლოდ ნომრების შეყვანის ნიღბის შემოღების გამო. ბოლოს - სააგენტოს შიდა საქმე.

Netpeak ვებსაიტზე შეკვეთის ფორმაში ნომრების ველი ასევე არჩევითია. მაგრამ ტელეფონის ნომრები მნიშვნელოვანია იმისთვის, რომ მომხმარებლებმა ყოველთვის იცოდნენ მათი განაცხადის ნომერი და სტატუსი (ამ მონაცემებს ვგზავნით SMS-ით), ასევე ანგარიშის მენეჯერების მუშაობის ოპტიმიზაცია. ექსპერიმენტის პერიოდი, როგორც წინა მაგალითებში, ორი თვეა. რიცხვების შეყვანის ნიღბის გაჩენის შედეგად, ფორმების შევსების პროცენტი გაიზარდა 44%-დან 83%-მდე - 39,4%-ით.
ექსპერიმენტის შემდეგ ადგილზე დავაყენეთ ნიღაბი. ნომრის შეყვანის ველი არჩევით რჩება. განაცხადი არ გაივლის მხოლოდ იმ შემთხვევაში, თუ ამ ველში არასწორი ნომერია შეყვანილი. ამ შემთხვევაში, ნიღბის პირველი ციფრები იცვლება იმის მიხედვით, თუ რომელ ქვეყანაში მდებარეობს საიტის მომხმარებელი. თუ ჩვენ ვსაუბრობთ წინასწარ შეკვეთის ფორმაზე, მაშინ საინტერესოა, რამდენად უკეთესია აპლიკაცია ტელეფონის ნომრებით. ჩვენ ავიღეთ ყველა ის აპლიკაცია, რომელიც ოდესმე მიიღეს წინასწარი შეკვეთის ფორმით და გამოვთვალეთ პროცენტი, ვინც გადაიზარდა მომხმარებლებზე ნომრის გარეშე და მასთან ერთად. ეს უკანასკნელი ყველაზე მეტი 0,81%-ით აღმოჩნდა.

გამომავალი: თუ პირი დატოვებს თქვენს ნომერს ფორმაში, ეს არ არის თანხის გადარიცხვის გარანტია.

თუ ვსაუბრობთ წინასწარი შეკვეთის ფორმაზე, წინა პლანზე არის მომხმარებლების ხელახალი გააქტიურების შესაძლებლობა, შესაძლებლობები, რომლებიც იხსნება მარკეტინგის წარმომადგენლებისთვის, რომლებიც შეიარაღებულნი არიან მომხმარებლების პირადი ტელეფონის ნომრების ბაზაზე. წარმატებული რეაქტივაციის შემთხვევების შესახებ ერთ-ერთ ახალ პოსტში მოგიყვებით. იმავდროულად, ჩვენ გირჩევთ, წაიკითხოთ ზომები, რომლებიც უნდა იქნას მიღებული მონაცემთა ბაზაში ტელეფონის ნომრებთან რაიმე ქმედებებამდე. გააზიარეთ კომენტარებში თქვენი გამოცდილება ტელეფონის ნომრებისთვის შეყვანის ნიღბის დანერგვისა და შემომავალი მოთხოვნების ხარისხზე დაკვირვებაში.