Plugin Jquery : Penghitung Karakter (Counter)
Jumat, Agustus 27, 2010 23:45Masih dengan Jquery, sekarang kita akan membuat Plugin lagi yang fungsinya untuk menghitung karakter yang sedang kita tulis dalam sebuah input text ataupun textarea.
Plugin ini mempunyai opsi2 yang fungsinya untuk mengcustom option tsb sesuai dengan keinginan kita.
Langsung saja kita buat kode seperti dibawah ini
-Siapkan jquery yang terbaru, silakan download dari webnya. disini saya menggunakan jquery-1.4.2.min.js yang pada saat ini merupakan versi terakhir.
-buat file jquery.itungchar.js simpan satu folder dengan jquery diatas tadi, adapun isi file tsb :
(function($){
$.fn.itungchar = function(options) {
var defaults = {
maxchar: 0,
stop:true,
borderobj:'red',
textcolor:'red',
textnow:"saat ini [now] karakter.",
textmax:"maksimal [max] karakter.",
txtalign:"left"
};
var options = $.extend(defaults, options);
var textinfo;
if(options.maxchar==0){
textinfo=options.textnow;
}else{
textinfo=options.textnow+" "+options.textmax.replace('[max]', options.maxchar.toString());
}
return this.each(function(){
obj = $(this);
var text = obj.val();
if(typeof text=='undefined') return false;
var textlength = text.length;
var element='<div id="infojml">'+textinfo.replace('[now]', textlength.toString())+'</div>';
$(element).insertAfter(obj);
obj.next()
.css('text-align',options.txtalign)
.css('font-size','11px');
obj.keyup(function(){
$(this).css('border-color','#000');
$(this).next().css('color','#000');
var text = $(this).val();
var textlength = text.length;
if(options.maxchar!=0){
if(textlength > options.maxchar) {
if(options.stop){
$(this).val(text.substring(0,options.maxchar)).css('border-color', options.borderobj);
}else{
$(this).css('border-color',options.borderobj);
}
$(this).next().css('color',options.textcolor);
return false;
}
}
$(this).next().html(textinfo.replace('[now]',textlength.toString()));
});
});
};
})(jQuery);
-ceritanya kita akan membuat plugin jquery yang bernama itungchar yang fungsinya untuk menghitung jumlah karakter yang kita masukan dalam sebuah input, bisa input text maupun textbox, selain itu juga ada opsi untuk membatasi hanya jumlah karakter tertentu saja yang bisa di masukan, misal textarea hanya di perbolehkan untuk 100 karakter saja.
-pada plugin diatas, nantinya kotak yang akan dibuat akan mempunyai nilai default jika options saat pemanggilan tidak di isi. nilai default tersebut adalah:
var defaults = {
maxchar: 0,
stop:true,
borderobj:'red',
textcolor:'red',
textnow:"saat ini [now] karakter.",
textmax:"maksimal [max] karakter.",
txtalign:"left"
};
-Kemudian buat file index.html dan simpan dalam satu folder dengan jquery dan jquery.kotak.js diatas yang baru kita bikin tadi. isi file nya adalah :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Membuat Plugin Jquery - Penghitung Karakter (Counter)</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" src="jquery.itungchar.js"></script>
<script>
$(document).ready(function(){
$('#inputtext').itungchar({maxchar:10});
$('#txtarea1').itungchar({maxchar:100});
$('#txtarea2').itungchar(
{
maxchar:50,
borderobj: "blue",
textcolor: "yellow"
}
);
$('#txtarea3').itungchar(
{
maxchar:50,
textnow:"jumlah karakter saat ini: [now]. ",
textmax:"maksimal karakter di perbolehkan : [max]",
}
);
$('#txtarea4').itungchar(
{
textnow:"jumlah karakter saat ini: [now]. ",
textmax:"",
}
);
});
</script>
<style>
</style>
</head>
<body>
<h2>Membuat Plugin Jquery - Penghitung Karakter (Counter)</h2>
<fieldset>
<legend>Menghitung karakter pada input text</legend>
<input type="text" name="tektku" id="inputtext"/>
</fieldset>
<fieldset>
<legend>Menghitung karakter pada textarea</legend>
<p>
<textarea cols="40" rows="5" id="txtarea1"></textarea>
</p>
<p>
<textarea cols="40" rows="5" id="txtarea2"></textarea>
</p>
<p>
<textarea cols="40" rows="5" id="txtarea3"></textarea>
</p>
<p>
<textarea cols="40" rows="5" id="txtarea4"></textarea>
</p>
</fieldset>
</body>
</html>
Opsi pada plugin ini adalah :
maxchar: jika berisi 0 (nol) maka tidak ada batasan, tapi jika lebih besar dari nol akan dibatasi sesuai opsi tersebut, nilai default 0
stop: jika nilai maxchar diatas lebih besar dari nol dan setelah mencapai nilai tersebut opsi ini akan menghentikan atau menolak untuk di ketik karakter lagi dengan nilai opsi true, nilai default adalah false
borderobj: warna border dari elemant input jika mencapai maxchar, default “red”.
textcolor: warna dari text info, nilai default “red”.
textnow: text yang berisi info jumlah karakter pada saat ini, mohon kata “[now]” jangan di ganti. nilai default “saat ini [now] karakter.”,
textmax: text yang berisi info dari maksimal karakter yang diperbolehkan, mohon kata “[max]” jangan diganti. nilai default “maksimal [max] karakter.”,
txtalign: align dari kedua info diatas, default “left”
Untuk lebih jelasnya silakan buka demo disini http://maswawa.web.id/demo/plugin-itungchar/ .
Untuk mendownload source code lengkapnya disini http://maswawa.web.id/demo/plugin-itungchar/jquery.itungchar.zip
Selamat Mencoba 
. sekilas saja, jquery adalah framework javascript yang serba guna. dengan jquery kita akan dipermudah dalam programming menggunakan javascript.
