Assalamualaikum. wr.wb.
Sampai jumpa kembali pada kesempatan kali ini saya akan menulis tutorial tentang limitasi inputan dengan menggunakan javascript, limitasi inputan ini biasanya diterapkan pada textarea untuk membatasi banyaknya karakter yang diinput oleh user, misalnya hanya 100 atau 1000 karakter saja, tergantung ownernya. Jadi apabila user mengisi textarea maka akan tampil pemberitahuan berapa karakter lagi yang tersisa, dan apabila jumlahnya sudah sampai pada batas yg ditentukan maka textarea akan disable atau user tidak bisa memasukkan inputannya lagi. Ok langsung saja ke tutorial, kali ini masih menggunakan javascript native karna saya sendiri untuk urusan tutorial atau sekedar coba-coba lebih menyukai native dari pada framework. sekian ceramahnya,
langsung saja buat form inputannya.
<!DOCTYPE html> <html> <head> <title> Limitasi Text Input </title> </head> <body> <form method="post" action=""> <textarea id="area" onkeyup="cek()" cols="50" rows="10"></textarea></br> <input type="submit" value="Submit"> <input type="reset" onclick="kosongi()"> </form> <!—div id”notif” digunakan untuk menampilkan pemberitahuan. <div id="notif"></div> </body> </html>
Berikut hasilnya.
bisa dilihat pada bagian textarea, saya memberikan event “onkeyup=cek()”, event “onkeyup” ini adalah event yang dijalankan ketika user mengangkat jarinya dari papan tombol keyboard. jadi setiap tombol pada keyboard diketik maka function “cek()” akan dijalankan dan akan menghitung seberapa banyak karakter yang telah diinputkan oleh user, kemudian ketika jumlah karakter sudah mencapai batas yang ditentukan, maka user tidak bisa memasukkan karakter lagi.
Berikut function "cek()"-nya
<script>
var target=document.getElementById("area");
var batas_karakter=100;
function cek(){
// jika jumlah karakter yg diketikkan lebih dari atau sama dengan 100
if(target.value.length >= batas_karakter ){
//disable textarea
target.readOnly=true;
//memberikan warna merah pada text pemberitahuan
document.getElementById("notif").style.color="red";
// menampilkan pemberitahuan
document.getElementById("notif").innerHTML="Maksimal 100 Karakter !";
}
//jika tidak
else{
//hitung jumlah karakter yg sudah diketikkan
var jumlah_karakter=target.value.length;
// untuk mengetahui jumlah karakter yg tersisa, maka batas_karakter dikurangi karakter yg telah diketikkan
var sisa=batas_karakter-jumlah_karakter;
// tampilkan pemberitahuan berapa karakter lagi yg tersisa
document.getElementById("notif").innerHTML=sisa+" Karakter tersisa !";
}
}
hasilnya sebagai berikut.
kemudian untuk mengembalikan form ke semula (ke keadaan kosong), maka disini saya membuat tombol “Reset” kemudian memberikan event onclick yg akan menjalankan function “kosongi()”.
function kosongi(){
//aktifkan kembali textarea
target.readOnly=false;
var notif=document.getElementById("notif");
//mengubah warna font pemberitahuan
notif.style.color="black";
//mengosongkan pemberitahuan
notif.innerHTML="";
}
</script>
Jadi ketika tombol “Reset” diklik maka textarea akan kosong dan pemberitahuan “Maksimal 100 karakter” akan hilang.
NOTE: sebenarnya tombol “Reset” secara default memang menghilangkan inputan yang terdapat di dalam form (mengembalikan form kesemula) tanpa memakai event apapun, tetapi disini saya menambahkan event onclick sekedar untuk menghilangkan pemberitahuan “Maksimal 100 karakter” dan mengembalikan warnanya dari merah ke hitam.
Berikut hasilnya saat tombol “Reset” diklik, bersih seperti sedia kala
Ok sekian tutorial dari saya.
Full Code.
<!DOCTYPE html>
<html>
<head>
<title> Limitasi Text Input </title>
</head>
<body>
<form method="post" action="">
<textarea id="area" onkeyup="cek()" cols="50" rows="10" style="border-color:#000"></textarea></br>
<input type="submit" value="Submit" onclick="alert("Wes Submit")">
<input type="reset" onclick="kosongi()">
</form>
<div id="notif"></div>
<script>
var target=document.getElementById("area");
var batas_karakter=100;
function cek(){
// jika jumlah karakter yg diketikkan lebih dari atau sama dengan 100
if(target.value.length >= batas_karakter ){
//disable textarea
target.readOnly=true;
//memberikan warna merah pada text pemberitahuan
document.getElementById("notif").style.color="red";
// menampilkan pemberitahuan
document.getElementById("notif").innerHTML="Maksimal 100 Karakter !";
}else{
//menghitung jumlah karakter yg sudah diketikkan
var jumlah_karakter=target.value.length;
// untuk mengetahui jumlah karakter yg tersisa, maka batas_karakter dikurangi karakter yg telah diketikkan
var sisa=batas_karakter-jumlah_karakter;
// tampilkan pemberitahuan berapa karakter lagi yg tersisa
document.getElementById("notif").innerHTML=sisa+" Karakter tersisa !";
}
}
function kosongi(){
target.readOnly=false;
var notif=document.getElementById("notif");
notif.style.color="black";
notif.innerHTML="";
}
</script>
</body>
</html>
See you all.
trima kasih.
Wassalamualaikum wr.wb.
