Telefonlar için Js maskeleri. Telefon alanını jQuery kullanarak maskeliyor ve kontrol ediyoruz. Acilen maskeye ihtiyaç var

Golovna / Zahist

İlk bakışta cevap açıktır: Yedekleme gereksinimi olarak telefon numarası alanına girin. Kullanıcıların siteden uygulama alanları aracılığıyla imza atabilecekleri yerler de bulunmaktadır. Örneğin programlar, yazılımlar, içerik satışına yönelik web siteleri. Ancak bu tür projelere ilişkin müşteri sayıları, gelecekte potansiyel müşterilerle etkileşim olanağı sağlayan ek bilgi olması bakımından önemlidir. Üstelik en basit ve etkili çözümün maske kullanımı olduğu da aşikar. Bunu vakalarla gündeme getirelim.

Maske neden gerekli?

Giriş maskesi, hangi formatın alana veri girilmesini gerektirdiğini gösterir. Örneğin adres alanına konum kodu olmadan telefon numarası veya telefon numarası girerseniz istediğiniz konuma gidemeyeceksiniz. Form maskesi, verilerin bire bir görünümünü sağlayarak veritabanında arama yapmayı ve yönetmeyi kolaylaştıracaktır. Netpeak tavsiyelerine göre, telefon numarası girme maskesi sitedeki sipariş formunun zorunlu bir unsurudur. Ancak yöneticilerimizin pratik önerileri başarılı müşteri örneklerine dayanmaktadır.

Site programlarda uzmanlaştığı için siteye numara girme alanı gerekliydi. Değişikliği mümkün kılmak için sitedeki sipariş formundaki "telefon" alanını dolduran yüz müşterimiz, Google Analytics'te hesap değiştirmek üzere kaydoldu. Dokuz alıcı için “telefon” alanı boş bırakıldı. Huş ağaçlarına maske dağıtıldı ve kadınlar maskeyi takmaya başladı. Deneyin saflığı için sahadan dolgu için gerekli kauçuk çıkarıldı ve başka hiçbir değişiklik yapılmadı.
Berezen için sonuç ise başvuruyu dolduran 22 destekçiyle 19 rakam oldu. Yani programı kaybeden müşterilerin %85'i telefon numaralarını kaybetti.

Bilgi merkezi web sitesi örneği: telefon numarası alanındaki giriş sayısında %15,4 oranında artış

Müşterinin web sitesi makale, kurs çalışması, tez ve diğer çalışmaların yazılmasına yönelik hizmetler sunmaktadır. Muhabirin telefon numarası iletişim için gereklidir ancak sitede bu alan gerekli değildir. Koristuvach formu hatırlamayabilir veya bu alana herhangi bir şey yazmayabilir. Daha önce olduğu gibi, ilk aşamada Google Analytics'te "telefon" alanını doldurma seçeneğini yükledik. Site tarafından engellenen 59 uygulamadan 15'inin numarası yoktu. Böylece şirket, gönderilen kayıt numarasına sahip formların yalnızca %74,6'sını reddetti. Daha sonra telefon alanına girebilmek için bir maske ekledik. Web sitesine 60 başvuru geldi. Bu durumda doldurulan 6 form müşterinin telefon numarasına dahil edilmedi. Ayrıca gönderilen ödeme formlarının %90'ı telefon alanına doğru şekilde doldurulmuştur. Ay boyunca - sayı maskesine girdikten sonra %15,4'lük bir artış. Nasamkinets teşkilatın dahili bir davasıdır.

Netpeak internet sitesinde yer alan sipariş formundaki numara alanının da doldurulması zorunludur. Müşterilerin başvurularının numarasını ve durumunu her zaman bilmeleri (SMS verilerine güveniyoruz) ve hesap yöneticilerinin çalışmalarını optimize edebilmeleri için tüm telefon numaraları önemlidir. Deneyin süresi ileri izmaritlerde olduğu gibi iki aydır. Savaş boyunca sayıları girmek için maskeler ortaya çıktı ve yüzlerce formu %44'ten %83'e, yani %39,4'e kadar doldurdu.
Deneyin ardından maskeyi internet sitesine gönderdik. Numaranın girileceği alana artık gerek yoktur. Alana yanlış numara girilmesi durumunda başvuru işleme alınmayacaktır. Bu durumda kütledeki ilk rakamların web sitesinde bulundukları kenardaki konumu değişir. Peşin ödeme şeklinden bahsediyorsak o zaman telefon numaralarıyla yapılan başvurunun ne kadar net olduğunu bilmek önemlidir. Başvuru formu aracılığıyla gelen tüm başvuruları aldık ve numarasız veya numarasız müşteriye dönüştürülen yüzlerce başvuruyu saydık. Geri kalanlar %0,81 ile en büyük artışı gösterdi.

Not: Bir kişinin size formdan numarasını vermesi, paranın iade edileceğinin garantisi değildir.

İleriye yönelik etkileşimin biçimi hakkında konuştuğumuzda, müşterileri yeniden etkinleştirme olanakları ön plana çıkıyor; müşterilerin özel telefon numaralarından oluşan bir veri tabanı oluşturan pazarlamacılara açılan olanaklar. Yeni gönderilerimizden birinde başarılı yeniden etkinleştirme vakalarını öğreneceğiz. Bu arada veritabanındaki telefon numaraları ile herhangi bir işlem yapmadan önce neler yapabileceğinizi de okuyalım. Telefon numaralarına giriş maskesi uygulamasından duyduğunuz memnuniyeti ve gelen başvuru sayısıyla ilgili endişelerinizi yorumlarda paylaşın.

Bu jQuery eklentisi, girilen telefon numarasına göre eşleşen bir giriş maskesini otomatik olarak seçmenize olanak tanır. Bu, görenler ve bezpomilkovym olanlar için web sitesinin yanında bir telefon numarası oluşturmanıza olanak sağlar. Ayrıca eklentinin alt bölümleri diğer alanlarda farklı olabilir çünkü giriş kuralları birkaç giriş maskesi şeklinde sunulabilir.

Giriş Web sitelerinde telefon numarasına ilişkin bilgilerin girilmesi gerekmektedir. Öyle oldu ki, her ülke, farklı ülkelerin sakinleri arasında periyodik olarak kafa karışıklığının ortaya çıkmasının bir sonucu olarak, arama ve çift sayılar için kendi kurallarını oluşturma hakkına sahip oldu: bazıları, baştaki rakam 8 olan numarayı, diğerleri - telden Bir'i çağırdı. sayı 0, üçüncüsü ise + işaretidir. Ana çözüm Sorunun karmaşıklığını azaltmak ve sayıları tek bir formata getirmek için 3 ana çözüm vardır:

Ek giriş maskesini kullanarak numarayı girmeniz istenir. Avantajı: Sayıyı, sayıda mümkün olan en düşük düzeyde görüntüleyin. Nedolyk: cilt kenarının sayının günü için kendi yazısı vardır.

Koristuvachev'e doğrudan bir bölge seçmesi ve sayının eksik kısmını doğrudan girmesi talimatı verildi; Muhtemelen maskenin yerinde donması nedeniyle. Avantajı: Farklı bölgeler (ve ayrıca bölgenin ortasındaki bölgeler) için farklı maskeler kullanma imkanı. Eksiklikler: Kenarların (ve kaplama kenarının ortasındaki bölgelerin) listesi daha büyük olabilir; Telefon numarasının bir bütün olarak görüntülenmesi sona erer (veya numarayı kaydedip görüntülemeden önce yeniden işlem yapılması gerekir).

Numara girmeyi atlamanıza izin vermek için numaranın önüne (giriş alanlarının arkasına) bir + işareti yerleştirin. Avantajları: Uygulama kolaylığı. Yeterli değil: Numara ekranının mevcut olması.

Önerilen çözüm Sonuç olarak, orijinal giriş maskesinin, sayının satır değerine göre değiştirilecek şekilde değiştirilmesine karar verildi. Ayrıca bir sayı girdiğinizde girilen ülkenin adı da görüntülenecektir. Bu yaklaşım subjektif olarak tedavinin tüm eksikliklerini çözebilir.

Dünyadaki ülke sayısının oldukça az olmasından yola çıkarak tüm ülkeler için maske listesi hazırlanmasına karar verildi. Nitekim Uluslararası Elektrik Telekomünikasyon Birliği'nin internet sitesinde yayınlanan haberler geniş çapta incelendi.

Bu bilgilerin toplanması birçok sürprizle sonuçlandı. Bilgi toplama sürecinde bölgedeki telefon numaraları için olası tüm seçeneklerin dahil edilmesi gerekiyordu. Ancak manuel olarak toplanan bilgilerin büyük miktarda olması nedeniyle, toplanan veri tabanında yanlışlıklar oluşması mümkündür. Bir saat içinde koçanı setinde düzeltme yapılması planlanıyor.

Yazılım uygulaması Giriş maskesinin özü, Habrahabr'ın hakkında çokça tartıştığı jquery.inputmask'ın vicoristan uygulamasıdır. Bu eklenti şu anda aktif olarak geliştirilmekte ve sadece bir uzantı yazmanın kolay olacağı şekilde tasarlanmaktadır. Ancak böyle bir genişlemeyi yazma görevinin neredeyse imkansız olduğu ortaya çıktı. İhtiyaçlarıma uyacak şekilde çıktı eklentisini geliştirmeye ve yeniden yazmaya başladım çünkü... Yazar genişletilmiş işlevsellik üzerinde aktif olarak çalışmaya devam ettiğinden, düzenlemelerimin durgunluğu sorunlu olabilir. Bu nedenle, ana çekirdek üzerine, harici etkinlikleri yöneten (ve geçersiz kılan) ve veri değişikliği gerçekleştiren bir eklenti yazma fırsatım oldu. Yeni girdilerin bağlayıcılarını ana eklentinin seçicilerine aktarmak için jquery.bind-first eklenti kitaplığını kullanın. Sıralama kuralları geliştirilirken aşağıdaki zihniyetler benimsendi:

Giriş alanındaki tüm semboller 2 türe ayrılmıştır: önemli semboller (seçimimde önemli bir sayı, 0-9 arası sayılar anlamına gelen # sembolü vardır) ve dekoratif semboller (diğerlerinin tümü).

Giriş maskesindeki diğer bir sembol türü şablon sembolleridir (bazı durumlarda # sembolü) ve diğerleri.

Sonuç olarak sınıflandırma sırasına göre aşağıdaki sıralama kuralları ortaya çıktı:

2 maskeyi karakter karakter değiştirirken yalnızca önemli karakterler (dekoratörler değil) kabul edilir.

Çeşitli joker karakterler eşit kabul edilir ve diğer önemli karakterler kodlarına eşittir.

Şablon olmayan karakterler her zaman şablon olanlardan daha küçüktür ve sonuç olarak daha çeşitlidir.

Giriş maskesindeki önemli sembollerin sayısı ne kadar kısa olursa, giriş maskesinin değeri de o kadar büyük olur.

Cilt maskesi girişini arayın Siyah maskeli giriş metni eşitlendiğinde, cilt maskesinin en az önemli karakterleri sıralanan listeden alınır. Satır giriş maskesini takip ediyor gibi görünüyorsa, tüm baştaki karakterlerin doğrulanmış olmasına bakılmaksızın, verilen giriş maskesinin tutarsız olduğu kabul edilir. Giriş metni bir dizi giriş maskesinden memnunsa, bunlardan ilki döndürülür. Daha sonra, bulunan modelde, tüm önemli semboller (şablon olmayanlar dahil), herhangi bir şablon sembolünün izin verdiği tüm sembollerin bir kombinasyonu olan bir şablon sembolle değiştirilir.

ana işlemci metinden bir karakteri çıkarırken, daha önce girilen akış maskesini değiştirerek tuşa basma - ardından Geri Al ve Sil tuşlarına basılması. Ayrıca senkronizasyon için metin giriş modunu değiştiren Ekle tuşuna da basmanız gerekir.
tuşa basma - girilecek karakterin parçalarına orijinal giriş maskesi tarafından izin verilmeyebilir (içindeki tüm önemli karakterler şablon karakterlerle değiştirilir), izin verilen maskelerden biriyle eşleşecek şekilde yeni satırı kontrol etmeniz gerekir. Böyle bir maske yoksa, sembole yapılan giriş atılır, aksi takdirde giriş maskesi güncellenir ve ardından giriş çekirdek analizörüne aktarılır.
yapıştırın, girin - panodan metin yapıştırın. İşlemi çekirdeğe aktarmadan önce, metnin panoya yapıştırılmasıyla ortaya çıkan satır için bir maske seçilir. Giriş maskesi seçilmediğinde, metin bir giriş maskesiyle tatmin olana kadar metin, baştan itibaren karakter karakter kırpılır. Benzer bir işlem, giriş alanındaki metin val() işlevine tıklanarak düzeltildiğinde ve ayrıca giriş maskesi giriş alanına ayarlandığından başlatıldığında gerçekleştirilir.
sürükle bırak, bırak - işlem yapıştırmaya benzer.
bulanıklık - giriş maskesini karşılamadığı için odağı kaybettiğinde metni temizleme modu artırıldığı için amaç için ek işlem. Bu fikir ana derleyiciden sonra öndekilerin üstüne aktarılır.

Tüm fikirler girilen maske kapsamında görüntülenir. Bu, girişin başlatılmasından sonra giriş maskesine tıkladığınızda yanlış davranışlardan kaçınmanıza olanak tanır (çünkü çekirdek, başlatılırken giriş maskesi alanında önceden kurulu tüm probları hatırlar).

Örnek wiki Maske listesinin formatı Maske listesi, farklı güçlerle önemli olan nesnelerin JavaScript dizisidir. Dizideki tüm nesnelerde giriş maskesini yerleştirecek en az bir güç mevcut olabilir. Maskeyi uygulayacak parametrenin adı yeterli olabilir. Aşağıda böyle bir dizinin bir parçası bulunmaktadır:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Rusya", "desc_en": "", " name_ua": "Rusya", "desc_ua": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Suudi Arabistan", "desc_en": "mobile", "name_ru": "Suudi Arabistan", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Suudi Arabistan", "desc_en": "", "name_ru": "Suudi Arabistan", "desc_ru": " " ), … ] Eklenti bağlantı parametreleri Bağlanmadan önce maske listesini seçip sıralamanız gerekir. Vikonların saldırı işlevlerinden kaçınmak önemlidir:
$.masksSort = fonksiyon(maskList, defs, eşleşme, anahtar)

maskList - giriş maskelerini kaydeden bir dizi nesne (harika bir nesnenin parçası);
defs – şablon sembollerinden oluşan bir dizi (benim durumumda bu # sembolüdür);
match - önemli karakterleri tanımlayan normal bir ifade (bu durumda /|#/);
anahtar – giriş maskesinin yerleştirileceği dizideki nesne parametresinin adı.

Bağlandığında, eklentiye robotunu tanımlayan özel bir nesne iletilir. Bu nesne aşağıdaki parametre kümesini içerir:

giriş maskesi - ana giriş maskesi eklentisine iletilen parametreleri içeren bir nesne;
eşleşme - şablon karakterlere ek olarak anlamlı karakterleri tanımlayan normal bir ifade;
değiştir - tüm önemli karakterlerin yerini alan bir joker karakter; putmask'ta belirlenen nesnenin nesnesinde olabilir;
liste – giriş maskelerini tanımlayan nesnelerin dizisi;
listKey – nesnenin ortasında, giriş maskesini kaydeden parametrenin adı;
onMaskChange - giriş maskesi güncellendiğinde çağrılan bir işlev; İlk parametre bir dizideki bir nesneye aktarıldığında, her birinin giriş maskesi girilen metinle eşleşir ve diğeri - atanan maskenin doğruluğu: doğru - giriş maskesi giriş maskesiyle eşleşir, yanlış - güvenilir bir sonuç için maskenin değeri, ek karakterlerin girilmesi gerekir.

Eklentiyi başlatmak için giriş maskesi yöntemini giriş alanının önüne yerleştirmelisiniz:
$.fn.inputmasks = işlev(maskOpts, mod)

maskOpts - eklentinin çalışmasını açıklayan bir nesne;
mod – dil dışı; Şu anda isCompleted değeri desteklenmektedir; sonuç olarak, giriş alanına metin eklenirse yöntem true, diğer durumda false olur.

Eklenti bağlantısı örneği
Giriş maskesi var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( tanımları: ( "#": ( validator: "", kardinalite: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match://, değiştir: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, tamamlandı) ( if (tamamlandı) ( var ipucu = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( ipucu + = "(" + maskObj.desc_uk + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("Giriş maskesi"); ) $(this ).attr("yer tutucu", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#müşteri_telefon").inputmask("+[##################]], maskOpts.inputmask) .attr("yer tutucu", $("# müşteri_telefon) ").inputmask("getemptymask")); $("#descr").html("Giriş maskesi"); ) )); $("#phone_mask").change(); Gösterim Bir demo örneği genişletilmiş görünüm eklentisi

Editörün Seçimi