Membatasi Jumlah Karakter Input Javascript


Membatasi Jumlah Inputan Dengan 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.

Penjelasan Form Inputan

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.

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
membatasi jumlah karakter input javascript

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.

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.

membatasi jumlah karakter inputan
membatasi jumlah karakter inputan

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.

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.

membatasi jumlah karakter yang diinput menggunakan javascript
membatasi jumlah karakter yang diinput menggunakan javascript

Kode lengkap

Berikut adalah kodingan lengkap dalam membatasi jumlah karakter yang di input menggunakan JavaScript.


Muzanni

Algorithms Learner, future lecturer and Happy to sharing about knowledge

Tutorial Menarik Lainnya

Membuat fungsi terbilang dengan javascript
Membuat fitur show hide password di HTML
Menghitung Jumlah Kata Dengan Javascript
Menghitung Jumlah Karakter Menggunakan Javascript

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD