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>

<!DOCTYPE HTML>

<head>

<title>Limit Input Jquery</title>

</script>

<style>

</style>

</head>

<body>

<h2>What's Happening?</h2>

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

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

$(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

Facebook DUMET School

Categories