jQuery ile Minimum ve Maksimum Karakter Limitli Form Oluşturalım

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

ÖRNEĞİ GÖRÜNTÜLE

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.

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

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

$('form').prepend('<span class="counter"></span>').append('<p class="info">Minimum Karakter : <span></span></p>');
counter = $('span.counter');
counter.html(counterValue);
comment.attr('maxlength', counterValue);
$('form').find('p.info > span').html(minCommentLength);
comment.keyup(function () {
var $this = $(this);
$commentLength = $this.val().length;
counter.html(counterValue - $commentLength);
if ($commentLength > minCommentLength - 1) {
submitButton.fadeIn(200);
} else {
submitButton.fadeOut(200);
}
});
});
</script>

Sırada CSS Kodları var.

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

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ı :

<form id="sorgulama" action="">
<textarea maxlength="140" name="message" id="message" placeholder="Yorumunuzu Yazın!"></textarea>
<input type="submit" value="Yorum Ekle">
</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.

Bu da ilginizi çekebilir  Fareyle Birlikte Hareket Eden Arkaplan Resmi


  • Beko

    Paşam bbu kod çok güzel çalısıyorda ben bunu ıkı formda nasıl kullanacam.Mesela

    Kullanıcı adı: olsun 10 kalan kkarakter yazsın

    yorum alanı olsun 1000 karakter kaldı dıye 2 tane nasıl yapabılırım

  • Ümit Vardar

    Uygulamayı mobilde çalıştırdığımda (android, chrome ve firefox) sağ üstteki 250 olan karakter sayısı 0 olduğunda yazmaya devam edebiliyorum. Ve bu rakam yazdıkça eksilere doğru gidiyor. Böyle bir problem var.Yalnız uygulama çok güzel.Butonun sonradan visible olması ayrı bi hava katmış. Tebrikler…