Case Study : Create script to count the character in the textarea
Requirements: WebServer Package, already installed.

Maybe we have ever find sms web application, ie applications that are used to send sms via web applications. Here we will not discuss about the processing of SMS, but we will discuss about the interface that is used in sending sms, usually in the form textarea, which will provide certain limitations on number of characters that have been determined (on sms, generally is 160 characters)

Nah. How do we calculate the characters written in the textarea?

With Javascript.

Step 1 : Prepare the work directory

  1. Create folder named tutorphp in your document root
  2. Save all file in this tutorial in this folder.

Step 2 :Create Form Textarea

  1. Type the following script,
    <script type="text/javascript" src="cek_karakter.js"></script>
    <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>
  2. Save with the name hitung_textarea.php

Step 3 : Create Javascript to Count Character in the Textarea

  1. Type the following script,
    function cek_karakter(form) {
    maks = 10; // max character
    if (form.teks.value.length >= maks) {
    var message = "0 Character Left ! "; //alert if character limit reacher
    form.teks.value = form.teks.value.substring(0, maks); //trim the textarea
    else { = maks - form.teks.value.length;} //count the character
  2. Save with the name cek_karakter.js

Step 4 : Testing Code

  1. Go to http://localhost/tutorial/hitung_karakter.php. You’ll see a form that you created, with the character limit is 10 (you can set yourself)
  2. Try typing something in the textarea, then the counter will start counting down, and when the character limit has been reached, the alerts appear as shown below

Hal yang juga menarik:

Hak Cipta

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

Related Articles:

Artikel terkait:


About the author

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she lo


  • Hi, I am using the bombax theme in urban on my site ( I want to have 9 entries on the front page instead of 10 so that it looks like a magazine. Could you please take a look and tell me what to do? Thanks.

  • Hi, saya menggunakan tema bombax di perkotaan di situs saya ( Saya ingin memiliki 9 entri di halaman depan, bukan 10 sehingga terlihat seperti majalah. Bisa tolong melihat dan katakan padaku apa yang harus dilakukan? Terima kasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: