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

Vatanay Özbeyli HTML5, jQuery, Tasarım Unsurları

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  Front-end Developer ne yapar? -Super Mario