Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / HT M L5 / j Q u ery i l e M i n i m u m ve M a ksi m u m Ka ra kter Li m i tl i F o rm O l u ştu ra l ı m
jQuery ile Minimum ve Maksimum Karakter Limitli Form Oluşturalım Vatanay Özbeyli tarafından 09 Haziran 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir
Merhaba arkadaşlar. Bu makalemde içerisinde maksimum ve minimum karakter limiti barındıran bir form öğesi hazırlayacağız. Böylece oluşturduğumuz form alanlarına ziyaretçilerin minimum ve maksimum kaç karakter girebileceğini belirleyebileceğiz. Bu işlem için jQuery desteği almamız gerekecek. Çünkü anlık olarak yazılan karakter sayısını belirtmemiz gerekiyor. Ben jQuery.min.js kullanacağım. Versiyon olarak ise 1.5.1 ve daha günceli yeterli olacaktır. Şimdi arkanıza yaslanın ve formumuzu hazırlamaya başlayalım.
Nasıl yapılır? JavaScript’in length komut satırıyla işe başlayacağız. Form alanımıza girilen harf sayısını hesapladıktan sonra gayet basit iki adet if döngüsü hazırlayacağız. Eğer 140′dan fazla karakter varsa yenisini ekleme Eğer 10′dan az karakter varsa buttonu görünmez yap Daha önce dediğim gibi tüm bu sayımları jQuery ile kullanıcıya göstermemiz gerekiyor. İlk olarak sayfamızın <head></head> kodları arasına jQuery.min’i dahil edelim. 1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
</script> Şimdi ise JavaScript kodlarını yine <head></head> içerisinde, Jquery.min’in altına ekleyelim. 1 2 3 4 5 6 7 8 9
<script> $(document).ready(function () { var comment = $('form#sorgulama textarea'), counter = '', counterValue = 140, //Maksimum karakter limiti minCommentLength = 10, //Minimum karakter limiti $commentValue = comment.val(), $commentLength = $commentValue.length, submitButton = $('form#sorgulama input[type=submit]').hide();
10 11 $('form').prepend('<span class="counter"> </span>').append('<p class="info">Minimum Karakter : <span></span></p>'); 12 counter = $('span.counter'); 13 counter.html(counterValue); 14 comment.attr('maxlength', counterValue); 15 $('form').find('p.info > span').html(minCommentLength); 16 comment.keyup(function () { 17 var $this = $(this); 18 $commentLength = $this.val().length; 19 counter.html(counterValue - $commentLength); 20 if ($commentLength > minCommentLength - 1) { 21 submitButton.fadeIn(200); 22 } else { 23 submitButton.fadeOut(200); 24 } 25 }); 26 }); 27 </script> Sırada CSS Kodları var. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
form { position: relative; top: 40px; border-radius: 4px; width: 400px; height: 180px; margin: 0 auto; } form textarea { border-radius: 2px; box-shadow:0px 2px 11px 0px rgba(0, 0, 0, 0.3); border: 1px solid #e2e6e6; margin: 10px 0 10px 0; font-family: 'Open Sans', sans-serif; outline: none; width: 395px; height: 100px; } form span.counter { float: right; color: #f2f2f2; }
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
form p.info { font-size: 11px; color: #CCC; float:left; } form p.info > span { color: #fff; } form input[type=submit] { cursor: pointer; box-shadow:0px 2px 11px 0px rgba(0, 0, 0, 0.3); border: 1px solid #a23431; border-radius: 2px; background-color:#c1403d; color: #fff; float: right; padding: 10px; }
Ve tabii ki HTML Kodları : 1 <form id="sorgulama" action=""> 2 <textarea maxlength="140" name="message" id="message" placeholder="Yorumunuzu Yazın!"></textarea> 3 <input type="submit" value="Yorum Ekle"> 4 </form> Ve formumuz böylece hazır. Bu dersimizde T.J. Fogarty’nin tekniği ile form alanlarında karakter sınırlaması yapmayı öğrendik. Bir sonraki makalemde görüşmek üzere, hoşça kalın.
Benzer Konular: CSS ve jQuery Yardımıyla Resimlere Caption CSS ile Formlarımızı Renklendirelim Görsellerinize Büyüteç ile Bakın CSS Kullanarak Button Tasarlamak HTML5 ile Tam Ekran (Full Screen)
Yazı Kategorisi : HTML5 , jQuery , Tasarım Unsurları
Anahtar Kelimeler : .js , form , html , jquery , karakter , limit , say覺s覺 , s覺n覺r , twitter