Membatasi Input text dengan Jquery | ala Twitter


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-alig



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


SUMBER = http://www.tutorial-webdesign.com/jquery-limit-input/

0 comments:

Post a Comment