Hai teman, saya kembali lagi nih. Belum bosankan dengan materi jquery ? hahaha semoga belum deh, Nah kali ini sebenarnya saya mau memberikan sebuah tutorial tentang jquery lagi :), yaitu cara Mebuat Limit Inputan Dengan Menggunakan Jquery . Tertarik ? 
Pernah tidak anda main sosial media dan ingin membuat status tetapi jika kita menulis banyak kalimat atau karakter maka akan ada limitnya. ? kalau tidak salah nih ya ini juga twitter dan BBM Blackberry massangger juga menerapkan ini.
Sebenarnya kita bisa membatasi inputan dengan 2 cara yaitu dengan cara dari server side dengan PHP dan Client Side Menggunakan Jquery, nah kalo ini kita akan membuat dengan jquery(Cliebt side).
Saya telah menyiapkan beberapa baris kode, kalian dapat copy langsung atau memahaminya terlebuh dahulu
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Membuat Limit Pada Inputan TextField</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/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);
});
});
</script>
<style>
.TextField{
text-align:center
}
</style>
</head>
<body>
<div class="TextField">
<h2>Tulis Status Anda</h2>
<textarea id="status"></textarea><br>
<span id="text_counter"></span><input type="submit" id="posting" value="Post" />
</div>
</body>
</html>Setelah itu silahkan jalankan file html tersebut di browser kalian. maka tampilanya akan seperti ini:
setelah saya menginputkan beberapa kata maka characters left akan berkurang dan jika melewati 0 atau sampai minus maka tombol post akan di disable.
Oke itu saja artikel tentang cara Mebuat Limit Inputan Dengan Menggunakan Jquery Sampai bertemu pada artikel selanjutnya.
The post Mebuat Limit Inputan Dengan Menggunakan Jquery appeared first on Kursus Website Terbaik.