Hai teman-teman, apa kabar semua? Semoga masih pada semangat ya untuk belajar. Kali ini saya akan share sedikit tentang cara kloning teks yang cukup sederhana. Disini kita menggunakan sedikit javasript. Pertama kita harus tuliskan htmlnya sebagai berikut :
|
1 2 3 4 5 |
<em><form> <p>Alamat 1 : <input type="text" id="inputbox1"></p> <p>Alamat 2 : <input type="text" id="inputbox2"></p> <p><input type="submit"></p> </form></em> |
Selanjutnya kita panggil core jquerynya. Yang kita pakai sekarang adalah jquery-1.4.js. jadi kita taruh file tersebut di dalam satu folder web kita lalu kita panggil. Taruh script ini di antara <head> dan </head>
|
1 |
<em><script type="text/javascript" src="jquery-1.4.js"></script></em> |
Selanjutnya kita tuliskan script javascript dibawahnya.
|
1 2 3 4 5 6 7 8 |
<em><script type="text/javascript"> $ (document).ready(function(){ $("#inputbox1").keyup(function() { var klonisasi = $ (this).val(); $("#inputbox2").val(klonisasi); }); }); </script></em> |
Lalu kemudian save dengan format .html dan buka filenya pada browser.
Hasilnya akan seperti ini.
Setiap yang dituliskan pada alamat 1 maka alamat 2 dengn otomatis akan mencetak input yang sama. Berikut script lengkapnya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<em><html> <head> <title>Klonisasi</title> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript"> $ (document).ready(function(){ $("#inputbox1").keyup(function() { var klonisasi = $ (this).val(); $("#inputbox2").val(klonisasi); }); }); </script> </head> <body> <form> <p>Alamat 1 : <input type="text" id="inputbox1"></p> <p>Alamat 2 : <input type="text" id="inputbox2"></p> <p><input type="submit"></p> </form> </body> </html></em> |
Demikian sedikit yang bisa saya share untuk kesempatan hari ini. Sampai jumpa pada kesempatan berikutnya…