#JavaScript

Membatasi Jumlah Karakter Input Javascript

By Muzanni
29 November 2023
JavaScript

Halo sobat malasngoding.com pada artikel kali ini kita coba bahas mengenai bagaimana cara membatasi jumlah karakter pada form inputan menggunakan javascript.

Dalam materi tutorial sebelumnya kita sudah bahas membatasi jumlah karakter input menggunakan html. Meskipun ada kemiripan judul namun materi ini jelas sangat berbeda penggunaannya. Pada contoh ini kita akan membuat batasan karakter yang di input pada tag textarea.

Membatasi Jumlah Karakter Input Javascript

Untuk membatasi jumlah karakter tersebut disini kita akan menggunakan JavaScript. Dalam contoh ini misalnya ada sebuah textarea yang harusnya bisa input 250 karakter saja. Jika dalam penginputannya melebihi dari angka maksimal maka akan ditolak.

Langsung saja ke pokok bahasan, mohon untuk dicermati supaya pembaca bisa memahami lebih baik materi ini.

Siapkan Form Inputan

Langkah awal dalam materi ini yaitu kita akan menyiapkan sebuah form. Isi dari form ini adalah textarea. Perhatikan contoh pembuatan form berikut ini.

<!DOCTYPE html>

<head>

<title>Malasngoding.com - Membatasi Jumlah Karakter Input JavaScript</title>

</head>

<h2>Malasngoding.com - Membatasi Jumlah Karakter Input JavaScript</h2>

<label>Pesan</label>

</div>

</form>

</div>

</body>

</html>

Penjelasan Form Inputan

<label>Pesan</label>

</div>

</form>

Pada potongan kode diatas dapat kita lihat bahwasanya form diberi nama FormKu, textarea kita berinama pesan dan sebah textbox yang diberinama jumlah. Textbox jumlah ini nantinya akan berisikan informasi jumlah karakter yang bisa di input dalam textarea. Juga textbox ini kita berikan element readonly="" yang fungsinya form ini tidak bisa di edit.

Menentukan Jumlah Karakter yang Bisa di Input

Langkah selanjutnya yaitu membuat jumlah maksimal karakter yang bisa di input menggunakan Javascript. Jumlah ini akan ditampilkan pada textbox yang sudah disediakan. Perhatikan kode berikut.

var maxString = 250;

function inisial(){

document.FormKu.jumlah.value = maxString;

}

</script>

Penjelasan Menentukan Jumlah Karakter

var maxString = 250; adalah inisialisasi variabel maksimum karakter yang bisa di input yaitu 250. document.FormKu.jumlah.value = maxString; adalah kodingan untuk mengisi nilai pada komponen yang bernama jumlah yang berapa pada FormKu.

Proses fungsi inisial akan berjalan ketika proses loading pertama kali (onload). Oleh karena itu kita perlu menginisialisai even onload kedalam tag body yang ada pada proses pembuatan form diatas. Adapun kode penerapan event onload nya adalah seperti ini : <body onload="inisial()">.

Membatasi Jumlah Karakter Input Javascript

Langkah selanjutnya yaitu bagaimana caranya jumlah maksumal karakter berkurang secara automatis setiap kali ada penulisan karakter pada textarea ? Cara yang akan kita coba terapkan adalah menggunkan event onKeyUp pada textarea. Event onKeyUp yang nantinya akan memanggil fungsi untuk proses pengurangan.

function jumlah_karakter(){

document.FormKu.jumlah.value = maxString - document.FormKu.pesan.value.length;

}

Isi dari fungsi yang sudah kita buat (jumlah_karakter) adalah tempat dimana dilakukan perngurangan antara jumlah karakter maksimal dengan jumlah karakter yang di input dan di tampilkan kedalam komponen textbox yang bernama jumlah.

Pada dasarnya kodingan diatas dapat berjalan dengan normal, namun yang terjadi adalah ketika karakter dalam textarea melebihi batas maksimum maka akan tampil jumlah karakternya min(-).

menghitung jumlah karakter menggunakan javacript — jumlah karakter menggunakan javacript

Nah, untuk memperbaiki hal tersebut maka perlu dilakukan pengecekan untuk menghandle seandainya inputan pada textarea melebihi nilai maksimum maka akan dianggap valid.

function jumlah_karakter(){

if (document.FormKu.pesan.value.length > maxString)

{

document.FormKu.pesan.value = document.FormKu.pesan.value.substring(0, maxString);

}

else document.FormKu.jumlah.value = maxString - document.FormKu.pesan.value.length;

}

Dalam melakukan pengecekan langkah awalnya yaitu mengecek apakah jumlah inputan melebih maksimum nilai ? caranya dengan if (document.FormKu.pesan.value.length > maxString). Jika nilai ini benar maka komponen textbox mengangga valid dengan menampilkan nilai 0. Sedangkan jika nilai inputan lebih kecil maka akan dilakukan pengurangan anatara jumlah maksimal dikurangi jumlah karakter inputan.