Ana Sayfa Hakkımda Referanslar Site Tanıtımı Sosyal İmleme Seo Paketleri Reklam İletişim Destek Rastgele Yazı Oku

jQuery İle Input Mask Yapımı

Merhaba arkadaşlar ,

Bir web sitesi yaptığınızı düşünün ve bu web sitesinde birden fazla form yaptığınızı da düşünürsek bu uygulama tam da size göre. Örneğin iletişim formu veya üyeyi siteye kayıt yaptıracaksınız fakat formunuzda cep telefonu, ev telefonu , doğum tarihi vs. alanlarınız var. Bunları kötü dizayn etmek bazen can sıkıcı gelebilir. Oysa biz o alanları doğru ve kullanışlı bir şekilde kullanıcının önüne sunarsak hem kullanıcı açısından hem de bizim açımızdan daha güzel olur.

jQuery İle Input Mask Yapımı

jQuery İle Input Mask Yapımı

Örneğin doğum tarihini girecek bir kullanıcı input alanına 15 15 1995 yazsa mı daha düzgün olur ? yoksa 15/15/1995 şeklinde maske yapan bir input mu daha pratik ve hoş olur ? karar sizin projeyi daha güzel tutmak sizin ellerinizde . Aşağıda paylaşacağım jQuery kodları ile formunuzda sitenizde artık daha dinamik gözükecek.

  • Öncelikle web sayfanızda javascript kütüphaneniz olması lazım yoksa çalışmaz.
  • Daha sonra mask işlemi için mask kütüphanesini sisteme çağıracağız.
  • Formda hangi input ta kullanmak istiyorsak o input a id tanımlaması yapalım ki karışıklık olmasın.

İşlemimiz bu kadar şimdi ise uygulamaya geçelim.

 

 

Bu uygulamanın daha ayrıntılı kullanabilmek için sitesini ziyaret edebilirsiniz. (http://digitalbush.com/projects/masked-input-plugin/)

 

Paylaşmak Güzeldir:

Tarih: 20 Temmuz 2014   Yazar:   Kategori: jQuery, Webmaster   1.127 Okunma3 Yorum

Konuyla İlgili Benzer Yazılar

Konuya Yapılan Yorumlar3 Yorum

  1. ilk Önce paylaşımınız için çok teşekkür ederim. gayet güzel ve hoş bir anlatım olmuş.
    fakat küçük bir sorunumun var :) Aynı PHP sayfasına 1 den çok ( 4 farklı input a telefon numarası mask uygulamak istiyorum ) telefon numarasına mask uygulamak istiyorum fakat bir türlü bu verdiğiniz kodlarla yapamadım..
    Eğer Konu hakkında yardımcı olursanız sevinirim.
    saygılarla iyi çalışmalar

    • hocam merhaba cevabını azıcık araştırınca buldum

      jQuery(function($){
      $(“#tarih”).mask(“99/99/9999″,{placeholder:”mm/dd/yyyy”});
      $(“#telefon”).mask(“(999) 999-99-99″);
      $(“#telefon1″).mask(“(999) 999-99-99″);
      $(“#gsm”).mask(“(999) 999-99-99″);
      $(“#fax”).mask(“(999) 999-99-99″);
      $(“#dahili”).mask(“9999″);

      });

      İlgilenen arkadaşlara tavsiyem olsun bari :)