Bu jQuery eklentisi, girilen telefon numarasının başına göre uygun giriş maskesini otomatik olarak seçmenize olanak tanır. Bu, bir web sitesi sayfasına telefon numarası girmeyi daha hızlı ve hatasız yapmanızı sağlar. Ayrıca, giriş kuralları birkaç giriş maskesi şeklinde gösterilebiliyorsa, geliştirilen eklenti diğer alanlarda da kullanılabilir.

Tanıtım

Web sitelerinde telefon numarası bilgilerinin girilmesi çok gereklidir. Öyle oldu ki, her ülke kendi arama kurallarını ve bunun sonucunda sakinler arasında numaranın uzunluğunu belirleme hakkına sahiptir. Farklı ülkeler karışıklık periyodik olarak ortaya çıkar: bazıları bir sayıyı baştaki 8 rakamıyla, diğerleri 0 rakamıyla ve yine diğerleri + işaretiyle belirtmek için kullanılır.

Mevcut çözümlerin gözden geçirilmesi

Ortaya çıkan karmaşıklığı bir şekilde çözmek ve sayıları tek bir formata getirmek için 3 ana çözüm var:

1. Kullanıcıdan bir giriş maskesi kullanarak numarayı girmesi istenir. Avantaj: Numaranın net görüntülenmesi, olası numara hatalarını en aza indirir. Dezavantaj: Her ülkenin kendi yazım ve sayı uzunluğu vardır.
2. Kullanıcıdan ülkeyi ayrı olarak seçmesi ve sayının geri kalanını ayrı olarak girmesi istenir; muhtemelen bir giriş maskesi kullanarak. Avantaj: Farklı ülkeler için (bir ülke içindeki bölgelerin yanı sıra) farklı giriş maskeleri kullanma yeteneği. Dezavantajları: Ülkelerin (ve her ülkenin içindeki bölgelerin) listesi büyük olabilir; telefon numarasının bir bütün olarak varlığı sona erer (veya numarayı kaydetmeden ve görüntülemeden önce ön işleme gerekir).
3. Bir sayının önüne (girişin dışında) bir + işareti koyun ve yalnızca sayı girişine izin verin. Avantajlar: uygulama kolaylığı. Dezavantaj: Sayının görsel olarak gösterilmemesi.

Önerilen çözüm

Sonuç olarak, normal giriş maskesini, sayının mevcut değerine göre değişecek şekilde değiştirmeye karar verildi. Ayrıca, numarayı girerken, tanımlanan ülkenin adını görüntülemeniz istenir. Bu yaklaşım, öznel olarak, yukarıdaki çözümlerin tüm dezavantajlarını çözmelidir.

Dünyadaki ülke sayısının nispeten az olduğu gerçeği dikkate alınarak, tüm ülkeler için bir giriş maskeleri listesi oluşturulmasına karar verildi. Uluslararası Telekomünikasyon Birliği'nin internet sitesinde yayınlanan bilgiler kaynak olarak kullanılmıştır.

Bu bilgilerin toplanması birçok sürpriz getirdi. Bilgi toplama sürecinde, her şeyi hesaba katmak gerekiyordu. olası seçenekler telefon numaraları, ülke içi dahil. Ancak, göz önüne alındığında Büyük bir sayı elle işlenmiş bilgiler, toplanan veri tabanında yanlışlıklar kalmış olabilir. Zamanla orijinal sette düzeltmeler yapılması planlanmaktadır.

Yazılım uygulaması

Giriş maskesinin çekirdeği olarak Habrahabr'da birçok kez bahsedilen jquery.inputmask uygulaması kullanıldı. Bu eklenti şu anda aktif olarak geliştirilmektedir ve ayrıca, uzantıları yazmak oldukça kolay olacak şekilde tasarlanmıştır. Ancak bu görevde böyle bir uzantı yazmanın neredeyse imkansız olduğu ortaya çıktı. Orijinal eklentiyi ihtiyaçlarıma uyacak şekilde değiştirmedim veya yeniden yazmadım, çünkü yazarı, işlevselliği genişletmek için aktif olarak çalışmaya devam ediyor, bunun sonucunda düzenlemelerimin uygulanması sorunlu olabilir. Bu nedenle, ana çekirdeğin üzerine, dış etkileri izleyen (artı müdahale eden) ve veri değişiklikleri yapan bir eklenti eklentisi yazmak zorunda kaldım. İşleyicilerinizi uygulamak için dış etkiler ana eklenti işleyicilerinden önce jquery.bind-first eklenti kitaplığı kullanıldı.

İzin Verilen Girdi Maskelerini Sıralama

En uygun giriş maskesinin doğru seçimi için tüm maske seti özel bir şekilde sıralanmalıdır. Sıralama kuralları geliştirilirken aşağıdaki kurallar benimsenmiştir:

1. Giriş maskesindeki tüm karakterler 2 türe ayrılır: önemli semboller(benim durumumda bu, rastgele bir rakam ve 0-9 arasındaki sayılar anlamına gelen # sembolü ve dekoratör sembolleridir (geri kalan her şey).
2. Giriş maskesindeki diğer bir karakter bölümü, joker karakterlerdir (benim durumumda bu # sembolüdür) ve geri kalan her şeydir.

Sonuç, uygulanma sırasına göre aşağıdaki sıralama kurallarıdır:

1. 2 giriş maskesini karakter karakter karşılaştırırken, yalnızca anlamlı karakterler (dekoratörler değil) dikkate alınır.
2. Farklı joker karakterler eşit olarak kabul edilir ve diğer önemli karakterler kodlarına göre karşılaştırılır.
3. Şablon olmayan semboller her zaman şablon olanlardan daha küçüktür ve sonuç olarak daha yüksekte bulunur.
4. Giriş maskesindeki anlamlı karakterlerin uzunluğu ne kadar kısa olursa, giriş maskesi o kadar küçük ve o kadar yüksek olur.

Uygun bir giriş maskesi bulma

Girilen metni sıralanmış listedeki bir sonraki maskeyle karşılaştırırken, her maskenin yalnızca önemli karakterleri dikkate alınır. Dize, giriş maskesinden daha uzunsa, önceki tüm karakterler doğrulanmış olsa bile, giriş maskesi geçersiz kabul edilir. Birkaç giriş maskesi giriş metnini karşılıyorsa, bunlardan ilki döndürülür. Ayrıca, bulunan maskede, tüm önemli semboller (şablon olmayanlar dahil), herhangi bir şablon sembolünün izin verdiği tüm sembollerin bir kombinasyonu olan bir şablon ile değiştirilir.

Olayları işleme ve engelleme

Giriş maskesinin ana çekirdeğinin olay işleyicileriyle çakışmaları önlemek için aşağıdaki olaylar engellenir:

• tuşa basmak- Geri al ve Sil tuş vuruşları izlenir - ana işleyici metinden bir karakter çıkarmadan önce mevcut giriş maskesini değiştirmek için. Ek olarak, senkronizasyon için metin giriş modunu değiştiren Ekle tuşuna basılması izlenir.
• tuşa basma- girilen karakter orijinal giriş maskesi tarafından çözülemeyebileceğinden (içindeki tüm önemli karakterler bir şablonla değiştirildiğinden), kontrol etmeniz gerekir Yeni hat izin verilen maskelerden birini karşılamak için. Böyle maskeler yoksa, karakter girişi atılır, aksi takdirde giriş maskesi güncellenir ve ardından olay çekirdek işleyicisine iletilir.
• yapıştırmak, giriş- panodan metin yapıştırma. İşlemeyi çekirdeğe aktarmadan önce, panodan metnin yapıştırılması sonucu elde edilen satır için giriş maskesi seçilir. Giriş maskesini bulmak mümkün değilse, metin en az bir giriş maskesini karşılayana kadar sondan karakter karakter kesilir. Benzer bir işlem, val () işlevi çağrılarak bir giriş alanındaki metni düzeltirken ve ayrıca boş olmayan bir giriş alanına uygulanmışsa bir giriş maskesini başlatırken gerçekleştirilir.
• sürükle bırak, damla- işleme yapıştırma olayına benzer.
• bulanıklık - ek işleme giriş maskesini karşılamıyorsa, odak kaybındaki metni temizleme modunun etkinleştirilmesi durumunda. Bu olay, öncekilerden farklı olarak ana işleyiciden sonra yakalanır.

Tüm olaylar inputmask uzayında asılıdır. Bu, eklentinin başlatılmasından sonra giriş maskesini çağırırken yanlış davranışı önler (çünkü çekirdek, başlatma sırasında giriş maskesi alanına önceden yüklenmiş tüm işleyicileri kaldırır).

kullanım örneği

Maske listesi formatı

Maske listesi, tercihen aynı özelliklere sahip bir JavaScript nesne dizisidir. Dizideki tüm nesneler, giriş maskesini içeren en az bir özelliğe sahip olmalıdır. Maskeyi içeren parametrenin adı isteğe bağlı olabilir. Aşağıda böyle bir dizinin bir parçası var:
[… ("Maske": "+7 (###) ### - ## - ##", "cc": "RU", "name_tr": "Rusya", "desc_tr": "", " name_ru ":" Rusya "," desc_ru ":" "), (" maske ":" +250 (###) ### - ### "," cc ":" RW "," name_en ":" Ruanda "," desc_tr ":" "," name_ru ":" Ruanda "," desc_ru ":" "), (" maske ":" + 966-5 - #### - #### "," cc ":" SA "," name_tr ":" Suudi Arabistan "," desc_en ":" mobil "," name_ru ":" Suudi Arabistan "," desc_ru ":" mobil "), (" maske ":" + 966- # - ### - #### "," cc ":" SA "," name_en ":" Suudi Arabistan "," desc_en ":" "," name_ru ":" Suudi Arabistan "," desc_en ":" "), ...]

Eklenti bağlantı parametreleri

Bağlanmadan önce, maske listesini yüklemeniz ve sıralamanız gerekir. Bu, aşağıdaki işlevi yürüterek yapılır:
$ .masksSort = fonksiyon (maskList, defs, maç, anahtar)

• maske listesi- giriş maskelerini depolayan bir dizi nesne (bir nesnenin parçası için yukarıya bakın);
• defs- bir dizi şablon sembolü (benim durumumda bu # sembolüdür);
• kibrit- önemli karakterleri açıklayan normal bir ifade (benim durumumda bu / | # /);
• anahtar- giriş maskesini içeren dizi nesnesinin parametresinin adı.

Bağlandığında, eklentiye çalışmasını açıklayan özel bir nesne iletilir. Bu nesne aşağıdaki parametre setini içerir:

• giriş maskesi- ana eklenti giriş maskesine iletilen parametreleri içeren bir nesne;
• kibrit- şablon olanlar hariç, önemli karakterleri açıklayan normal bir ifade;
• yer değiştirmek- tüm önemli sembollerle değiştirilecek bir şablon sembolü; inputmask nesnesinin tanımlar nesnesinde bulunmayabilir;
• liste- giriş maskelerini açıklayan bir dizi nesne;
• listeAnahtarı- giriş maskesini saklayan nesnenin içindeki parametrenin adı;
• onMaskChange- giriş maskesi güncellendiğinde çağrılan işlev; ilk parametre olarak, giriş maskesi girilen metne karşılık gelen diziden bir nesne iletilir ve ikincisi olarak, maske tanımının doğruluğu: true - giriş maskesi tamamen eşleşir, false - ek karakterler gereklidir maskeyi güvenilir bir şekilde belirlemek için.

Eklentiyi başlatmak için giriş alanına giriş maskesi yöntemini uygulamanız gerekir:
$ .fn.inputmasks = işlev (maskOpts, mod)

• maskeOpts- eklentinin çalışmasını açıklayan bir nesne;
• mod- isteğe bağlı; v şu anda isCompleted değeri desteklenir - sonuç olarak, eşleşen maskeyle eşleşen metin tam olarak girilirse yöntem true, aksi takdirde false döndürür.

Eklenti bağlantı örneği

Giriş maskesi

Gösteri

Geliştirilen eklentinin gösteriminin bir örneği şu adreste sunulmaktadır:

İlk bakışta cevap açıktır: "telefon numarası" alanını gerektiği gibi işaretleyin. Ancak, gereksiz zorunlu alanlar nedeniyle bir kullanıcının siteden ayrılabileceği nişler vardır. Örneğin uygulamalar, yazılımlar, içerik satış siteleri. Ancak, bu tür projeler için kullanıcı numaraları, gelecekte potansiyel müşterilerle etkileşime geçmeyi mümkün kılan ek veriler olarak önemlidir. Ayrıca, basit ve etkili bir çözüm var - bir giriş maskesi kullanmak. Bunu vaka çalışmalarıyla kanıtlayalım.

Neden bir giriş maskesine ihtiyacınız var?

Giriş maskesi, alana hangi biçimde veri girmeniz gerektiğini gösterir. Örneğin, bir kullanıcı alan kodu olmadan bir telefon numarası girerse veya adres alanına telefon numarası girerse, bir sonraki öğeye geçemez. Formlardaki maske, veri tabanını bulmayı ve yönetmeyi kolaylaştıran giriş verileri için tek tip bir görünüm sağlar. Netpeak tavsiyelerinde, telefon numarası giriş maskesi, web sitesindeki sipariş formunun zorunlu bir unsurudur. Uzmanlarımızın herhangi bir pratik tavsiyesi gibi, bu pozisyon da başarılı müşteri vakalarına dayanmaktadır.

Site uygulamalar konusunda uzmanlaştığı için sitede numara girme alanı isteğe bağlıydı. Sitedeki sipariş formundaki "telefon" alanını dolduran müşterilerin yüzdesindeki değişimi takip etmek için özel bir değişken uyguladık. Google analitiği... Şubat ayında dokuz müşteriden hiçbiri "telefon" alanını doldurmadı. Mart ayında bir giriş maskesi tanıttık ve kullanıcılar onu doldurmaya başladı. Deneyin saflığı için alan isteğe bağlı bırakılmış ve başka bir değişiklik yapılmamıştır.
Başvuruyu dolduran 22 kullanıcı ile Mart - 19 sayı için sonuç. Başka bir deyişle, uygulamayı sipariş eden kullanıcıların %85'i telefon numaralarını bırakmış.

Bilgi merkezi web sitesinin örnek olay incelemesi: telefon numarası alanındaki doldurma sayısında %15,4 artış

Müşterinin sitesi, makaleler, dönem ödevleri, tezler ve diğer çalışmalar yazmakla ilgilenmektedir. Kullanıcının telefon numarası iletişim için tercih edilir, ancak sitede bu alan isteğe bağlıydı. Kullanıcı formu dolduramadı veya bu alana herhangi bir şey yazamadı. İlk defa olduğu gibi, ilk etapta Google Analytics'te "telefon" alanının doldurulmasının takibini kurduk. Kasım ayında site ziyaretçileri tarafından yapılan 59 başvurudan 15'inde rakam bulunmamaktaydı. Yani şirket, gönderilen formların yalnızca %74,6'sını tamamlanmış bir sayı ile aldı. Ardından telefon alanına bir giriş maskesi ekledik. Aralık ayında site 60 başvuru aldı. Ancak, yalnızca 6 doldurulmuş form müşterinin telefon numarasını içermiyordu. Sonuç olarak, gönderilen sipariş formlarının %90'ı doğru doldurulmuş bir "telefon" alanı içeriyordu. Ay boyunca - yalnızca sayı girmek için bir maskenin tanıtılması nedeniyle% 15,4'lük bir artış. Son olarak - ajansın iç davası.

Netpeak web sitesindeki sipariş formundaki sayılar için alan da isteğe bağlıdır. Ancak telefon numaraları, müşterilerin başvurularının numarasını ve durumunu her zaman bilmeleri (bu verileri SMS yoluyla gönderiyoruz) ve ayrıca hesap yöneticilerinin çalışmalarını optimize etmeleri için önemlidir. Deney süresi, önceki örneklerde olduğu gibi iki aydır. Rakam girmek için bir maskenin ortaya çıkması sonucunda, form doldurma yüzdesi %44'ten %83'e - %39,4 arttı.
Deneyden sonra siteye bir maske uyguladık. Numarayı girme alanı isteğe bağlı kalır. Bu alana yanlış numara girilmesi durumunda başvuru geçmeyecektir. Bu durumda maskedeki ilk haneler site kullanıcısının bulunduğu ülkeye göre değişir. Bir ön sipariş formundan bahsediyorsak, telefon numaraları ile uygulamanın ne kadar iyi olduğunu bilmek ilginç. Ön sipariş formu aracılığıyla gelen tüm başvuruları aldık ve numarasız ve onunla birlikte müşteriye dönüşenlerin yüzdesini hesapladık. İkincisi, %0,81 ile en fazla olduğu ortaya çıktı.

Çözüm: Bir kişi size numarasını bırakırsa, bu para transferinin garantisi değildir.

Ön sipariş şeklinden bahsedecek olursak, ön planda müşterilerin yeniden etkinleştirilmesi olasılığı, kullanıcıların kişisel telefon numaralarından oluşan bir tabanla donanmış pazarlamacılar için açılan fırsatlar var. Yeni gönderilerden birinde size başarılı yeniden etkinleştirme vakalarını anlatacağız. Bu arada veri tabanındaki telefon numaraları ile herhangi bir işlem yapmadan önce alınması gereken önlemleri okumanızı tavsiye ederiz. Telefon numaraları için bir giriş maskesi uygulama ve gelen isteklerin kalitesini gözlemleme konusundaki deneyiminizi yorumlarda paylaşın.