Html textarea karakter sınırlaması

Twitter’da  benim en çok şikayet ettiğim özelliktir  mesajlarda sınırlama olması. Gereksiz  bir özellik değil elbette. Hem Twitter sitesinin yükü azalıyor bu limitlerle hemde aşırı spam gönderilmesinin önüne geçiliyor. Gerçi gelen mesajların 99.99%  hala spam olsa da bandwith açısından  adamların işine geliyor karakter sınırlamak. Form kutusunda  ayrıca  harf sayacı olduğu için mesaj yazmak isteyen kişi fazla  karakter girdiği zaman bazılarını silmek zorunda kalıyor. Siz de  eğer  sitenizde  bu tarz  bir özellik istiyorsanız    tarafından jQuery ve Css ile hazırlanmış bu form örneğini sitenizde kullanabilirsiniz. Kaç harf limiti olacağını kendiniz  JavaScript bölümündeki var maxLength = 120; rakamını değiştirerek belirleyebilirsiniz. Sayaç sizin 120 harfe kadar yazmanıza izin veriyor. Yazmaya başlar başlamaz her harf başı sayaçtan bir rakam düşüyor. 120 tane harf yazdıktan sonra send (gönder) butonu devre dışı kalıyor. 120 karakterden fazlasını sayaç kabul etmiyor. Gönder butonunun çalışabilmesi için bazı harflerin silinmesi gerek.

Kullanım

• Head etiketleri arasına eklemeniz  gereken bölümler.

IE9 için Html5 shiv :

<!--[if lt IE 9]>
	<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Js ve font  adresleri :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

 JavaScript : 

<script type="text/javascript">
$(document).ready(function() {
	$("#message").keyup(function() {
		var maxLength = 120;
		var length = $(this).val().length;
		$("#message-characters").text(maxLength - length + " characters left.");
		if (length > maxLength) {
			$("#message-characters").css({
				"color": "#ccc"
			});
			$("#button-send").attr({
				"disabled": "disabled"
			});
		} else {
			$("#message-characters").css({
				"color": "#fff"
			});
			$("#button-send").removeAttr("disabled");
		}
	});
});
</script>

 Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- GENERAL ---------- */

body {
	background-color: #6596a1;
	color: #fff;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

h3 {
	font-size: 24px;
	line-height: 1.5em;
}

input {
	border: none;
	font-family: inherit;
	margin: 0;
}

textarea {
	border: none;
	font-family: inherit;
	margin: 0;
	vertical-align: top;
}

.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}
.clearfix:after { clear: both; }

/* ---------- MESSAGE-FORM ---------- */

#message-form {
	border-radius: 0 0 5px 5px;
	margin: 50px auto;
	width: 360px;
}

#message-form header {
	background-color: #3d5054;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	padding: 10px 0;
}

#message-form header h3 {
	color: #fff;
	text-align: center;
}

#message-form textarea {
	font-size: 16px;
	line-height: 1.5em;
	height: 160px;
	padding: 10px;
	max-width: 340px;
	outline: none;
	resize: none;
	width: 340px;
}

#message-form footer {
	background-color: #3d5054;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	padding: 10px 16px;
}

#message-form input[type="submit"] {
	background-color: #6596a1;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #fff;
	float: right;
	font-size: 16px;
	line-height: 1.5em;
	padding: 2px 16px;
}

#message-form input[type="submit"]:disabled {
	background-color: #4d6f77;
	color: #ccc;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	<div id="message-form">
		<form action="javascript:void(0);" method="POST">
			<fieldset>
				<header>			
					<h3>Send your message!</h3>
				</header>
				<p>
					<textarea name="" id="message" placeholder="Your message goes here..."></textarea>
				</p>
				<footer>
						<p class="clearfix">						
						<span id="message-characters">120 characters left.</span>
						<input type="submit" id="button-send" value="Send">
					</p>
				</footer>
			</fieldset>
		</form>
	</div>