Anasayfa » UI / UX » Basit Bir Telefon Numarası Seçici Nasıl Oluşturulur

    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.

     
    Telefon Numarası Seçicinin HTML Tabanı
    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

    veya JavaScript.

    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 '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'; 

    Ekle 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();   

    İki 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. * / 

    Son satır, olduğu gibi farklı iki özel karakter, - ve + bölgesel kodları ve rakamları tanımlamak için telefon numarası formatlarında kullanılır. 0.

    Arama ekranına son satırı oluşturmak için aşağıdakileri ekleyin. 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();   

    arama ekranı şimdi tamamlandı, ekle #dialWrapper 1. Adımda oluşturduğunuz HTML konteynerini kullanarak iki DOM yöntemi:

    1. querySelector () yöntem kabı seç
    2. AppendChild () yöntem arama ekranını ekle - düzenlenen tuşlamak değişken - kaba
     document.querySelector ( '# dialWrapper') appendChild (çevirmeli.); 
    Şekillendirme olmadan Ekran Tablosu
    3. Arama Ekranına Stil Verin

    Daha çekici hale getirmek için, arama ekranını biçimlendir CSS ile.

    Benim tarzıma uymak zorunda değilsin, ama yapmayı unutma eklemek 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);  
    Stilli Arama Tablosu
    4. Tıklamada Arama Ekranını Göster

    İlk önce 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.

    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. 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

    Özel bir işlev eklemek rakamları telefon numarası alanına girer arama ekranı hücrelerinin tıklamasıyla.

    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);  

    Şimdi çalışan arama ekranı telefon numarası alanını girmek için.

    CSS’ye ayak uydurmak için rakamların arka plan rengini : 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

    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 + karakterini kabul edin ve - daha sonra karakter.

    Düzenli ifademin görselleştirmesini Debuggex uygulamasıyla oluşturulan ekran görüntüsünde görebilirsiniz..

    Regex debuggex.com'dan görselleştirme

    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. 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.

    Giriş doğrulamadığında, giriş ) (Doğrulamak işlev gerekir geri bildirim ver kullanıcıya.

    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..

     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.

    Ayrıca bir de eklediğime dikkat edin: ek doğrulama en fazla karakter (en fazla 15 olamaz) 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;  

    Sizin telefon numarası seçicisi şimdi hazır, aşağıdaki demoyu inceleyin.

    © Savtec
    Yararlı bilgi ve web geliştirme ipuçları. Programlama, web tasarımı, CSS, HTML, JAVASCRIPT. WINDOWS'u yapılandırın ve yeniden yükleyin. Sıfırdan site ve uygulama oluşturma.