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.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id