Basit Bir Telefon Numarası Seçici Nasıl Oluşturulur
Telefon numaraları, adların ve e-postaların yanı sıra, çevrimiçi formlarda en sık kullanılan iletişim bilgileridir. Telefon numarası alanları genellikle kullanıcıların klavyelerini kullanırken sayıları girmelerini gerektirecek şekilde tasarlanmıştır. Bu yöntem sıklıkla yanlış veri girişi ile sonuçlanır..
için kullanıcı girişi hatalarını azaltmak ve sitenizin kullanıcı deneyimini geliştirmek, bir GUI Bu, kullanıcıların telefon numaralarını, tarih seçicilere benzer şekilde hızlı bir şekilde girmelerini sağlar..
Bu eğitici yazıda, nasıl yapıldığını göreceksiniz. bir giriş alanına basit bir telefon numarası seçicisi ekleyin. Aşağıdaki demoda görebileceğiniz ve test edebileceğiniz GUI'ye ulaşmak için HTML5, CSS3 ve JavaScript kullanacağız. Kullanıcıların gerçekten geçerli bir telefon numarası girmelerini sağlamak için düzenli ifadeler de kullanırız..
1. Telefon Numarası Alanını Yaratın
İlk, bir giriş alanı oluştur Sağda bir arama simgesi ile tıklama üzerinde arama ekranını açacaktır. Arama simgesi, 3'te 3 şeklinde düzenlenmiş 9 kara kutuya benziyor, normal bir telefonda gördüğünüz gibi.
Kullanıyorum tel uygun HTML5 anlambilimi için giriş türü, ancak Metin İsterseniz giriş tipi.
2. Arama Ekranı Yaratın
arama ekranı olduğu sayılar ızgarası 0 ila 9 artı bazı özel karakterler. İle yapılabilir ya bir HTML Burada, size JavaScript'te arama ekranı tablosunun nasıl oluşturulacağını göstereceğim. Elbette, eğer bu şekilde tercih ederseniz, tabloyu doğrudan HTML kaynak koduna ekleyebilirsiniz.. İlk önce yeni bir tane oluşturun Ekle İki Son satır, olduğu gibi farklı iki özel karakter, Arama ekranına son satırı oluşturmak için aşağıdakileri ekleyin. arama ekranı şimdi tamamlandı, ekle Daha çekici hale getirmek için, arama ekranını biçimlendir CSS ile. Benim tarzıma uymak zorunda değilsin, ama yapmayı unutma eklemek İlk önce Ardından, arama simgesine bir tıklama olayı işleyicisi ekleyin JavaScript ile için görünürlüğü değiştirmek arama ekranının. Bunu yapmak için, yukarıda belirtilenleri kullanmanız gerekir. Özel bir işlev eklemek rakamları telefon numarası alanına girer arama ekranı hücrelerinin tıklamasıyla. Şimdi çalışan arama ekranı telefon numarası alanını girmek için. CSS’ye ayak uydurmak için rakamların arka plan rengini Ekle basit regex doğrulama telefon numarasını kullanıcı basamakları giriş alanına girer. Kullandığım doğrulama kurallarına göre, telefon numarası yalnızca bir rakam veya Düzenli ifademin görselleştirmesini Debuggex uygulamasıyla oluşturulan ekran görüntüsünde görebilirsiniz.. Telefon numarasını, ülkenizin veya bölgenizin telefon numarası biçimine göre de doğrulayabilirsiniz.. Yeni bir Normal İfade nesnesi oluşturun ve bu öğeyi saklayın. Giriş doğrulamadığında, giriş Ben kırmızı kenarlık ekleme Giriş geçersiz olduğunda giriş alanına, ancak kullanıcıyı başka şekillerde, örneğin hata mesajları ile bilgilendirebilirsiniz.. Ayrıca bir de eklediğime dikkat edin: ek doğrulama en fazla karakter (en fazla 15 olamaz) Sizin telefon numarası seçicisi şimdi hazır, aşağıdaki demoyu inceleyin. veya JavaScript.
'Tablo' eleman DOM kullanarak createElement () yöntem. Ayrıca ver 'Dial' tanımlayıcı. / * Arama ekranı oluştur * / var dial = document.createElement ('table'); dial.id = 'dial'; için döngü Arama tablasının dört sırasını bununla birlikte yerleştirmek için. Sonra her satır için, başka koş için döngü her satıra üç hücre eklemek için. Her bir hücreyi işaretle ile 'DialDigit' sınıf. (var rowNum = 0; rowNum) < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
için Yukarıdaki döngüler, arama tablonun hücrelerine giren rakamları hesaplar. cell.textContent özellik - aşağıdaki şekilde: (colNum + 1) + (satırNum * 3) / * ilk satır * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * ikinci satır * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * vs. * /
- ve + bölgesel kodları ve rakamları tanımlamak için telefon numarası formatlarında kullanılır. 0.Eğer iç ifade için döngü. (var rowNum = 0; rowNum) < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper 1. Adımda oluşturduğunuz HTML konteynerini kullanarak iki DOM yöntemi:querySelector () yöntem kabı seçAppendChild () yöntem arama ekranını ekle - düzenlenen tuşlamak değişken - kaba document.querySelector ( '# dialWrapper') appendChild (çevirmeli.);
3. Arama Ekranına Stil Verin
kullanıcı seçmek: none; mülk #dial konteyner Böylece kullanıcı basamaklara basarken, imleç tarafından seçilmeyecek. #dial width: 200px; yükseklik: 200px; sınır-çöküşü: çöküş; metin hizalama: orta; pozisyon: göreceli; -ms-user-select: yok; -webkit-user-select: yok; -moz-user-select: yok; kullanıcı seçimi: yok; renk: # 000; kutu-gölge: 0 0 6px # 999; .dialDigit border: 1px solid #fff; imleç: işaretçi; arkaplan rengi: rgba (255,228,142, 7);
4. Tıklamada Arama Ekranını Göster
görünürlük: hidden; stil kuralı #dial yukarıdaki CSS’de için arama ekranını gizle varsayılan olarak. yalnızca kullanıcı arama simgesini tıkladığında gösterilir.querySelector () ve addEventListener () yöntemleri. İkincisi click olayı ekler arama simgesine toggleDial () fonksiyon.toggleDial () fonksiyon görünürlük değiştirir Arama ekranının gizliden görünürüne ve geri. document.querySelector ('# dialIcon'). addEventListener ('klik', toggleDial); toggleDial () dial.style.visibility = dial.style.visibility === 'gizli' || dial.style.visibility === "? 'visible': 'hidden'; 5. İşlevsellik ekleyin
Telefon numarası() fonksiyon rakamları birer birer ekler -e Metin içeriği ile işaretlenen giriş alanının özelliği #telefon yok tanımlayıcı. phoneNo = document.querySelector ('# phoneNo'); dialNumber () işlevi phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : hover ve :aktif (kullanıcı tıkladığında). .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Normal İfade Doğrulama Ekleyin
+ karakterini kabul edin ve - daha sonra karakter.
Desen değişken. Ayrıca bir özel oluştur ) (Doğrulamak girilen telefon numarasının denetlenip normal ifadeye uyuyor, ve eğer öyleyse En az 8 karakter uzunluğunda.) (Doğrulamak işlev gerekir geri bildirim ver kullanıcıya. pattern = yeni RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); validate (txt) // geçerli bir telefon numarası için en az 8 karakter. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Doğrulamayı Gerçekleştirin
) (Doğrulamak fonksiyonlar çağrılması gerekiyor doğrulama yapmak için. Den ara Telefon numarası() değerini 5’in değerini doğrulamak için 5. adımda oluşturduğunuz telefon yok değişken.Eğer Beyan. dialNumber () işlevi var val = phoneNo.value + this.textContent; // izin verilen maksimum karakter, 15 ise (val.length> 15) false döndürür; (Val) doğrulamak; phoneNo.value = val;
