Membatasi Jumlah Karakter pada TextArea

Bagi yang sudah kenal HTML pasti tahu dengan property Maxlength pada textbox

Contoh

nama:<input type="text" name="pesan" maxlength="150">

Artinya,maksimal jumlah karakter yang bias di isikan pada input nama adalah 150 karakter.namun , property MaxLength hanya bisa pada input text ( textbox ),tidak berlaku pada Textarea.

Contoh

Pesan: <textarea name="pesan" cols="20" rows="15">

Bagaimana kalau seandainya ada yang iseng menginput data sampai seribu atau sejuta karakter?

Kan bisa berantakan website kita ( flood data )

Kasus lainya bisa dijumpai unutuk pengiriman SMS ( Short Message Service )via website.

Karakter penulisan SMS juga di batasi.karena kalau karakternya kebanyakan akan mengakibatkan gagalnya proses pengiriman sms tersebut

Dengan jquery kita bisa membatasi jumlah maksimal karakter yang di perbolehkan pada Text Area.

Unutk lebih jelasnya simak script berikut,perhatikan text yang di tebalkan aja.

<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#karakter').keyup(function() {
var len = this.value.length;
if (len >= 150) {
this.value = this.value.substring(0, 150);
}
$('#hitung').text(150 - len);
});
});
</script>
</head>
<body>
<div class="demo" style="width: 265px;">
<form>
<p>(Jumlah Karakter Maksimal: 150) </p>
<p><textarea id="karakter" name="karakter" cols="28" rows="8"></textarea> </p>
<span id="hitung">150</span> Karakter Tersisa.
</form>
</div>
</body>
</html>

saya coba jelaskan ya maksud dari script di atas yang di tebalkan

1.Jquery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah di tampilkan semua di halaman web fungsi yang di gunakan adalah $(document).ready(function(){


2.Setelah semua elemen di tampilkan tahap berikutnya adalah memilih elemen berdasarkan class atau id yang di defenisikan contoh script jquery di atas menggunkankan selector
            $('#karakter')
            $('#hitung')
3.setelah elemen dipilih tahap berikutnya memeberikan aksi terhadap elemen yang sudah dipilih id="karakter" dan id="hitung" seperti contoh dibawah

<textarea id="karakter" name="karakter" cols="28" rows="8"></textarea>
<span id="hitung">150</span> Karakter Tersisa.
4.Pastikan ada pemanggilan file jquerynya seperti contoh di bawah
   <script type="text/javascript" src="jquery-1.4.js"></script>

dan hasilnya seperti gambar berikut


Silkan download file nya disini

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Share |

Portfolio

www.wearnespc.comwww.solper.comwww.autojaya.comwww.intisolar.comsmartprint.co.idwww.ottopharm.comoliser.co.idAnd More ....

Livechat

  • Sonny
    Marketing

  • Aris G
    Support

  • Agus
    Support

  • Kurnianto
    Support

  • Eko P
    Designer

  • Andreas
    Designer

  • LiveZilla Live Help

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Phone : 021 - 2636 3170
    021 - 3377 0050
     
Mobile : 0856 - 9360 1378
    0812 - 806 2772
    0857 - 1586 8992
    0816 - 180 8005
     
Blackberry PIN : 23096502
     
Fax : 021 - 633 5765
     
Web : www.proweb.co.id