Limitasi Text Input dengan Javascript

Ukuran: px

Mulai penontonan dengan halaman:

Download "Limitasi Text Input dengan Javascript"

Liana Santoso
7 tahun lalu
Tontonan:

2 Limitasi Text Input dengan Javascript Oleh: d-newbie 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, t... 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

3 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.

4 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"

5 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.

6 Tentang Penulis d-newbie Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding, ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi

dokumen-dokumen yang mirip

Membuat Form Dinamis dengan HTML & Javascript.

Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element