Coding
HTML : Javascript onkeyup

1

Contoh 1. onkeyup dengan kondisi

2

Contoh 2. onkeyup sederhana

Kali ini saya ingin sharing tentang event onkeyup yang dapat digunakan dalam HTML. Contohnya itu seperti gambar di atas. Jadi ceritanya kita nulis sesuatu di textbox dan secara realtime apa yang kita tulis itu muncul di textbox atau di tempat lain.

Di atas ada dua contoh, contoh 1 itu menggunakan kondisi, dimana kedua textbox ID1 dan ID2 harus terisi baru textbox kode ikutan keisi juga. Kalo contoh 2 itu yang sederhana alias simple, cukup isi textbox ID1, textbox Kode akan menampilkan apa yang diisikan di textbox ID1 secara realtime.

Nah cara membuatnya sebenarnya mudah, saya kira sudah banyak yang tahu, tapi saya disini share aja, semoga membantu sahabat pembaca yang belum tau. Jawabannya adalah onkeyup. Jadi bagaimana caranya, kita coba praktekkan yang contoh 2 dulu ya. Cekidot step-stepnya berikut ini.

LANGKAH PERTAMA

Buat sebuah halaman HTML sederhana dengan 2 textbox. Mungkin seperti ini kali ya

keyup3

Nanti hasilnya seperti ini.

keyup4

LANGKAH KEDUA

Perhatikan textbox kode diberi id “kode” dan textbox id 1 diberi id “id1”. Untuk apa itu? Jawabannya hanya untukmu, eh salah … kok jadi keinget istri ya … ahaha. Lanjut, id digunakan untuk menandai elemen di HTML yang akan kita modifikasi melalui jalur lain, jalur lain itu adalah javascript.

Jadi sekarang kita coba tambahkan javascriptnya. File html tadi kita tambahkan javascriptnya, jadinya begini nih.

keyup5

Sampai disini belum ada reaksi apa2 dari output program kita. Karena kita baru sekadar menambahkan script saja. Lalu selanjutnya bagaimana? perhatikan langkah berikutnya.

LANGKAH KETIGA

Tambahkan event onkeyup pada textbox id1, bagaimana caranya? Ini dia jawabannya.

keyup6

Coba perhatikan bagian yang dilingkari di atas. Kita hanya tinggal menambahkan event onkeyup saja. Nah isinya adalah function javascript yang telah kita buat pada langkah kedua tadi. Sampai disini silahkan coba jalankan file html anda melalui browser dan lihat apa yang terjadi.

Untuk mempermudah, silahkan download file nya disini. Sementara untuk contoh 1 yang dengan kondisi itu, anda bisa download disini.

Related Post

Leave a comment

Your email address will not be published. Required fields are marked *