Bu makalemizde jquery’nin eklentilerinden biri olan mask eklentisi ile makalenin devamında ki gibi özel tarih-telefon-yüzde-ürün anahtarı gibi özel veri girişini sağlayabileceksiniz.
Jquery Mask İle İnput Nesnelerine Özel Veri Girişi Sağlamak
Maskedinput eklentisini kullanabilmek için öncelikle jquery’i sayfanızın head etiketleri arasına ekleyiniz ardından sayfanın en altından erişeceğiniz maskedinput sayfasından eklentiyide head etiketleri arasına yapıştırınız.
Jquery ve Maskedinput scriptlerini ekledikten sonra alttaki html kodlarını sayfanıza ekleyiniz
Html Kodları
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <table> <tr> <td>Date</td> <td><input id="date" value="1231" type="text" tabindex="1" /></td> <td>99/99/9999</td> </tr> <tr> <td>Phone</td> <td><input id="phone" type="text" tabindex="2"/></td> <td>(999) 999-9999</td> </tr> <tr> <td>Phone + Ext</td> <td><input id="phoneExt" type="text" tabindex="2"/></td> <td>(999) 999-9999? x99999</td> </tr> <tr> <td>Int'l Phone</td> <td><input id="iphone" type="text" tabindex="2"/></td> <td>+33 999 999 999</td> </tr> <tr> <td>Tax ID</td> <td><input id="tin" type="text" tabindex="3"/></td> <td>99-9999999</td> </tr> <tr> <td>SSN</td> <td><input id="ssn" type="text" tabindex="4"/></td> <td>999-99-9999</td> </tr> <tr> <td>Product Key</td> <td><input id="product" type="text" tabindex="5"/></td> <td>a*-999-a999</td> </tr> <tr> <td>Eye Script</td> <td><input id="eyescript" type="text" tabindex="6"/></td> <td>~9.99 ~9.99 999</td> </tr> <tr> <td>Purchase Order</td> <td><input id="po" type="text" tabindex="6"/></td> <td>aaa-999-***</td> </tr> <tr> <td>Percent</td> <td><input id="pct" type="text" tabindex="6"/></td> <td>99%</td> </tr> <tr> <td>Phone (autoclear=false)</td> <td><input id="phoneAutoclearFalse" type="text" tabindex="6"/></td> <td>(999) 999-9999</td> </tr> <tr> <td>Phone + Ext (autoclear=false)</td> <td><input id="phoneExtAutoclearFalse" type="text" tabindex="6"/></td> <td>(999) 999-9999? x99999</td> </tr> </table> |
Javascript Kodları
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 36 | <script type="text/javascript"> $(function() { $.mask.definitions['~'] = "[+-]"; $("#date").mask("99/99/9999", { completed: function() { alert("completed!"); } }); $("#phone").mask("(999) 999-9999"); $("#phoneExt").mask("(999) 999-9999? x99999"); $("#iphone").mask("+33 999 999 999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); $("#product").mask("a*-999-a999", { placeholder: " " }); $("#eyescript").mask("~9.99 ~9.99 999"); $("#po").mask("PO: aaa-999-***"); $("#pct").mask("99%"); $("#phoneAutoclearFalse").mask("(999) 999-9999", { autoclear: false, completed: function() { alert("completed autoclear!"); } }); $("#phoneExtAutoclearFalse").mask("(999) 999-9999? x99999", { autoclear: false }); $("input").blur(function() { $("#info").html("Unmasked value: " + $(this).mask()); }).dblclick(function() { $(this).unmask(); }); }); </script> |
Sonuç
Maskedinput eklentisine buradan ulaşabilirsiniz.
✍ jQuery Mask konulu makalemiz için lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 jQuery Mask konulu makalemizi sosyal medya kanallarından paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Bu script Türkçe Ö/ö karakterine izin vermiyor. Sizde de aynı mı? Çözemedim bir türlü 🙁
Evet sorunu siz söyledikten sonra farkettim maskedinput’u sadece sayısal girişler için kullanmıştım ama şimdi plugin’i kontrol ettiğimde regex pattern’inden kaynaklandığını farkettim çözüm için projenize dahil ettiğiniz maskedinput plugininin .js uzantılı dosyasını açın(okunabilir olması için .min.js uzantılı olmamasına dikkat edin) ve altta işaretlediğim kısmı değiştirin sorun çözülecektir.