Membatasi Jumlah Karekter dengan Javascript

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Limit Karakter adalah sebuah teknik untuk membatasi jumlah karakter pada suatu inputan form. Biasanya teknik ini digunakan untuk melakukan Limit karakter pada Pesan SMS. Cara Seperti ini dapat kita buat dengan Client Side Scripting "Javascript" suatu misal untuk membatasi sebuah inputan karakter yang diketik pada form Textarea. Hal ini Banyak diterapkan pada Aplikasi SMS gateway berbasis Website. :)

Membatasi Jumlah Karekter Pada Textarea dengan Javascript
Langkah-Langkah Membuat Limit Karakter Pada Textarea  

1. Buat Sebuah Form yang berisi sebuah Input text dan Textarea. Source code yang saya gunakan adalah sebagai berikut :
<table>
<form id="limit_id" method="post" name="limit" >
<tr><td>Sisa <input name="maks" type="text" id="batas" size="1" value="148" readonly/> Char</td></tr>
<tr><td><textarea style="display:inline;font-size: 14pt;" name="pesan" wrap="off"rows="10" maxlength="148" cols="40"
onKeyDown="limit_karakter(document.limit.pesan,document.limit.maks,148,this)" 
onKeyUp="limit_karakter(document.limit.pesan,document.limit.maks,148,this)"></textarea>
<td></tr>
</form>
</table>

2. Selanjutnya Kita perlu membuat sebuah Fungsi di Javascript untuk mendeteksi adanya penekanan tombol keyboard pada form textarea. Disini kita memberikan jumlah maksimal karakter yang dapat diketik adalah 148 sehingga jika karakter limit maka karakter yang diketik tidak akan muncul. Berikut adalah Code Javascriptnya 
<script Language="JavaScript">
function limit_karakter(field,cntfield,maxlimit,f) {
var addition = 0;
 var newLines=f.value.match(/(rn|n|r)/g);
 if (newLines != null) {
 addition = newLines.length;
 }
 cntfield.value = (maxlimit - field.value.length) - addition;
}
</script>

Simpan dengan Ekstensi *.html lalu coba jalankan File Tersebut. Semoga Berhasil dan Happy Coding. :)
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.