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.
- Membatasi dengan PHP (Server site)
- 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}
Oke sekian tutorial kali ini, semoga berguna untuk anda yang sedang belajar Jquery :)
Salam Wakaka Design :D
[…] 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 […]
Keren ban.. (y)
izin make.. :D
keren gan, bisa juga tuh dipake buat 2 textarea
thanks gan
Naaaahh..satu lagi yg berguna dalam perancangan aplikasi web, tambahan pendukung validasi inputan :D trims
[…] 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 […]
gan ko ga mau counting ya? Angkanya tetep 140 trus?