Menghitung Karakter TextArea dalam Form dengan PHP

Februari 18, 2011

Studi Kasus : Membuat script untuk menghitung karakter yang tertulis dalam textarea
Kebutuhan : WebServer Package, already installed.

Mungkin kita pernah menemukan aplikasi web sms, yaitu aplikasi yang digunakan untuk mengirim sms via aplikasi web. Disini kita tidak akan membahas mengenai pemrosesan sms, namun kita akan membahas mengenai interface yang digunakan dalam mengirim sms, biasanya berbentuk textarea, yang akan memberikan batasan terhadap sejumlah karakter tertentu yang telah ditentukan (pada sms, umumnya adalah 160 karakter)
Nah. Bagaimana cara kita menghitung karakter yang tertulis dalam textarea?

Dengan Javascript.

Step 1 : Persiapkan Folder Kerja

Buat folder dengan nama tutorial dalam document root anda
Simpan semua file dalam praktikum ini dalam folder tutorial tersebut.

Step 2 :Membuat Form Textarea

Ketikkan script berikut,

<html><head>
<title>Itx.Web.Id</title>
<script type="text/javascript" src="cek_karakter.js"></script>
</head>
<body>
<form name=form method=post>
<h3> Write Your Message Here </h3>
<textarea onKeyPress=cek_karakter(this.form); onKeyDown=cek_karakter(this.form); name=teks rows=4 cols=30></textarea>
<br> <br>
<input size=1 value=10 name=total>
</form>
</body>

</html>

Simpan dengan nama hitung_textarea.php

Step 3 : Membuat Javascript untuk Menghitung panjang Karakter

Ketikkan script berikut,

function cek_karakter(form) {
maks = 10; // max character
if (form.teks.value.length >= maks) {
var message = "0 Character Left ! "; //alert if character limit reacher
alert(message);
form.teks.value = form.teks.value.substring(0, maks); //trim the textarea
}
else {
form.total.value = maks - form.teks.value.length;} //count the character
}

Simpan dengan nama cek_karakter.js

Step 4 : Testing Code

Pergi ke http://localhost/tutorial/hitung_karakter.php. Anda akan melihat form yang telah anda buat, dengan batasan karakter adalah 10 (bisa anda setting sendiri)
Coba ketikkan sesuatu dalam textarea, maka counter akan mulai menghitung mundur, dan ketika batasan karakter telah dicapai, maka muncul alert seperti gambar dibawah

Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

7 Comments

bowo berkata:

Februari 23, 2011 pukul 2:08 pm

weh keren, izin coba

Balas
dhanie89 berkata:

Maret 10, 2011 pukul 4:23 pm

keren bos, langsung praktek deh,
tapi kalau seandainya kita mau hitung karakter yang sudah diketik secara otomatis bagaimana ? punya script nya ga ?

Balas
ipul berkata:

Maret 10, 2015 pukul 3:02 pm

terima kasih ….

Balas
fb hacker online berkata:

Juli 16, 2015 pukul 11:22 am

Right here is the right blog for anyone who really wants to
find out about this topic. You understand so much its almost tough to argue with you (not that I actually will need to…HaHa).
You definitely put a fresh spin on a subject which has been discussed for ages.

Excellent stuff, just wonderful!

Balas
fb hacking online berkata:

Juli 18, 2015 pukul 3:22 pm

This piece of writing gives clear idea in support of the new
people of blogging, that actually how to do running a blog.

Balas
gunjam.net berkata:

Agustus 27, 2015 pukul 2:22 pm

dicoba gan

Balas
poppy berkata:

Juli 1, 2017 pukul 1:33 am

wah thankyou … buat TA lancar gan ^^.. thank you thank you

Balas