Cara Membatasi Input Text dengan Limit jQuery

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.

Kali ini saya akan berbagi tutorial mengenai Cara Membatasi Input Text Dengan Limit jQuery, Ok langsung saja praktikan.

1. Silahkan ketikan kode HTML berikut.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Limit Input Jquery</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		<!-- Javascript ketik disini --> 
	</script>
	<style>
		<!-- CSS ketik disini -->
	</style>	
</head>
<body>
	<div class="box">
		<h2>What's Happening?</h2>
		<textarea id="status"></textarea>
		<span id="text_counter"></span><input type="submit" id="posting" value="Post" />
	</div>
</body>
</html>

2. Kemudian kita akan percantik dulu dengan CSS, ketikan kode nya berikut ini.

body{background:#222 url(http://subtlepatterns.com/patterns/natural_paper.png)}
		a{text-decoration:none;color:#999}
		textarea{
			width:100%;
			height:50px;
			display:block
		}
		input[type="submit"]{padding:5px 10px;}
		#text_counter{float:right;}
		.box{
			overflow:hidden;
			width:400px;
			margin:150px auto;
			background:#f4f4f4;
			padding:10px 30px;
			box-shadow:0 0 10px #f4f4f4;
			-webkit-box-shadow:0 0 10px #f4f4f4;
		}
		.overlimit{color: red;}
		.footer{width:400px;padding:10px;margin:0 auto;text-align:center}

3. Selanjutnya untuk memberikan limit pada inputan kita kasih kode jQuery berikut.

	$(document).ready(function(){
		var left = 140
		$('#text_counter').text('Characters left: ' + left);
	 
			$('#status').keyup(function () {
	 
			left = 140 - $(this).val().length;
	 
			if(left < 0){
				$('#text_counter').addClass("overlimit");
				 $('#posting').attr("disabled", true);
			}else{
				$('#text_counter').removeClass("overlimit");
				$('#posting').attr("disabled", false);
			}
	 
			$('#text_counter').text('Characters left: ' + left);
		});
	});

4. Kalo sudah jangan lupa disimpan, kemudian jalankan dibrowser, dan lihat hasilnya.

Baik, sampai disini tutorial mengenai Cara Membatasi Input Text Dengan Limit jQuery, semoga bermanfaat, amin.

Selamat mencoba.

DEMO