Selamat Datang

Membatasi Input text dengan Jquery | ala Twitter

Jquery limit input
Beberapa waktu lalu saya diminta untuk membuat sebuah web aplikasi untuk keperluan lomba menulis cerita, cerita tersebut panjang nya hanya boleh 700 karakter.

Bagaimana caranya agar data yang tersimpan ke database tidak lebih dari 700 karakter?

Bagaimana pula caranya agar user mengetahui sudah berapa banyak karakter yang mereka tulis (bagian dari user experiance) ?

Ada 2 cara yang bisa digunakan.

  1. Membatasi dengan PHP (Server site)
  2. Membatasi dengan Javascript/Jquery (Client site)

Kali ini akan dibahas dengan Javascript, khususnya menggunakan Jquery.

Seperti apa yang akan dibuat?

Yang kita buat mungkin akan mirip dengan twitter, dimana twitter membatasi pengguna dengan hanya mengizinkan menulis 140 karakter untuk setiap kali posting status.

Mirip dengan kasus membatasi karakter untuk cerita.
 
Bagaimana membuat nya?

Struktur HTML (index.html)

<!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 ditulis disini --> 
	</script>
	<style>
		<!-- CSS ditulis 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>
	<div class="footer"><a href="http://tutorial-webdesign.com">Wakaka Design | <a href="http://tutorial-webdesign.com/membatasi-input-jquery-limit">Back to Tutorial</div>
	
</body>
</html>

 

Code Javascript

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

 

Code CSS

		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}

 

Demo

 

Oke sekian tutorial kali ini, semoga berguna untuk anda yang sedang belajar Jquery :)

Salam Wakaka Design :D





Penulis :

I’m just simple person, web developer part time, web design holic, website researcher. Work in the world of websites & coding for eat : View all posts by Abuser

Comments

6 thoughts on “Membatasi Input text dengan Jquery | ala Twitter

  1. […] itu project tersebut saya buat juga dengan trik Membatasi Input Text Dengan Jquery agar artikel hanya bisa ditulis sebanyak 500 karakter saja, dari situ banyak hal yang bisa […]

  2. Ferdhika says:

    Keren ban.. (y)
    izin make.. :D

  3. keren gan, bisa juga tuh dipake buat 2 textarea
    thanks gan

  4. Darwin says:

    Naaaahh..satu lagi yg berguna dalam perancangan aplikasi web, tambahan pendukung validasi inputan :D trims

  5. […] juga dengan trik <strong><a title=”Membatasi Input Text Jquery” href=”http://www.tutorial-webdesign.com/jquery-limit-input/”>Membatasi Input Text Dengan Jquery</a></strong> agar artikel hanya bisa ditulis sebanyak 500 […]

  6. Candra says:

    gan ko ga mau counting ya? Angkanya tetep 140 trus?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development