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