Fatih SoysaljQuery Mask Plugin, javascript için geliştirilmiş bir veri giriş eklentisidir. Bir kullanıcının veriyi belirli bir biçimde (tarih, telefon numaraları, IP vb.) istenilen formatta belirtilen alana sabit genişlikli elemente daha kolay girmesine olanak sağlar.
Internet Explorer, Firefox, Safari, Opera ve Chrome tarayıcılarında test edilmiştir. Maske ve maske tanımlarından oluşan bir format olarak sayfa içerisine tanımlanır.
Başlamadan önce, ziyaret etmek isteyebileceğiniz bağlantıları belirtmek istedim:
Projenin GitHub sayfası https://github.com/igorescobar/jQuery-Mask-Plugin adresinde bulunabilir.
Demoyu ve dokümantasyon sayfasını https://igorescobar.github.io/jQuery-Mask-Plugin/ adresinde de bulabilirsiniz.
Haydi başlayalım!
jQuery Mask Plugin ne işe yarar?
Telefon numaraları, posta kodu gibi kullanıcı verilerini toplamak istiyorsanız ve bunu yapmak için back-end kontrollerini kullanmaksızın form elementlerini formatlamak istiyorsanız bu eklenti sizin için biçilmiş bir kaftandır.
Eklenti kullanımı son derece basittir. Eklenti, kullanıcı girdisini girdikçe değiştirirse de, girişimi müdahaleci olmayan bir şekilde yapar, kullanıcıdan bağımsız değişiklikleri input üzerinde yapar, hatta kullanıcı ekrana bakmıyorsa büyük olasılıkla bunun olduğunu bile anlamayacaktır. Aşağıdaki demo kodunu incelediğinizde ne demek istediğimi sanırım daha iyi anlayacaksınız.
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js" type="text/javascript"></script> |
Bunlar CodePen ayarlarında eklendiğinden onları gerçekten göremiyorsunuz, ancak sistemin çalışması için ikisini de projenize dahil etmeniz gerekecek.
Örneğin ilgili class bilgilerine sahip birkaç form giriş elementimiz olsun, bunları ilgili formatlarda biçimlendirelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | $(document).ready(function(){ $('.date').mask('00/00/0000'); $('.time').mask('00:00:00'); $('.date_time').mask('00/00/0000 00:00:00'); $('.cep').mask('00000-000'); $('.phone').mask('0000-0000'); $('.phone_with_ddd').mask('(00) 0000-0000'); $('.phone_us').mask('(000) 000-0000'); $('.mixed').mask('AAA 000-S0S'); $('.cpf').mask('000.000.000-00', {reverse: true}); $('.cnpj').mask('00.000.000/0000-00', {reverse: true}); $('.money').mask('000.000.000.000.000,00', {reverse: true}); $('.money2').mask("#.##0,00", {reverse: true}); $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', { translation: { 'Z': { pattern: /[0-9]/, optional: true } } }); $('.ip_address').mask('099.099.099.099'); $('.percent').mask('##0,00%', {reverse: true}); $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true}); $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"}); $('.fallback').mask("00r00r0000", { translation: { 'r': { pattern: /[\/]/, fallback: '/' }, placeholder: "__/__/____" } }); $('.selectonfocus').mask("00/00/0000", {selectOnFocus: true}); }); |
Bonus: Callback Örnekleri:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var options = { onComplete: function(cep) { alert('CEP Completed!:' + cep); }, onKeyPress: function(cep, event, currentField, options){ console.log('An key was pressed!:', cep, ' event: ', event, 'currentField: ', currentField, ' options: ', options); }, onChange: function(cep){ console.log('cep changed! ', cep); }, onInvalid: function(val, e, f, invalid, options){ var error = invalid[0]; console.log ("Digit: ", error.v, " is invalid for the position: ", error.p, ". We expect something like: ", error.e); } }; $('.cep_with_callback').mask('00000-000', options); |
Sorularınız olursa benimle iletişim bölümünden paylaşabilirsiniz. Görüşmek üzere.
