Fungsi Pindah Baris

 

Saya lagi mencoba membuat input data supplier  sederhana, terdiri dari beberapa textbox tentunya, nah ketika kita telah selesai mengisikan sebuah data misal Kode Supplier, kursor akan pindah ke textbox Nama Supplier tanpa harus memindahkan kursornya dengan mouse alias cukup dengan menekan Enter, kursor otomatis akan pindah ke textbox berikutnya.

Script ini saya dapat dari hasil nanya2x sama Mas Andry kalo tidak salah namanya, sebab di YM-nya namanya itu he2x..

Kita buat dulu sebuah Fungsi dengan menggunakan Javascript
function nextfield(ID)

{
if (event.keyCode == 13)
document.getElementById(ID).focus();
}
Lalu bikin htmlnya
<table>
<tr>
<td>Kode Supplier</td>
<td>:</td>
<td>><input type=text name=kode_supplier onkeypress=”nextfield(‘Nama_Supplier’)”></td>
</tr>
<tr>
<td>Nama Supplier</td>
<td>:</td>
<td><input type=text name=Nama_Supplier  id=”Nama_Supplier” onkeypress=”nextfield(‘Contact_Person’)”></td>
</tr>
<tr>
<td>Contact Person</td>
<td>:</td>
<td><input type=text name=contact id=Contact_Person></td>
</tr>
</table>
Sedikit saja ya HTMLnya, itu juga sudah mewakili. Oke berikut ini penjelasannya.
Pertama – tama kita buat sebuah fungsi di Javascript dengan nama nextfield(ID), nah ID yang didalam kurung itu adalah paramater textbox yang kita kirim sehingga kursor akan pindah ke textbox yang memiliki id yang kita kirimkan tadi.

onkeypress=”nextfield(‘Nama_Supplier’)”

Event yang digunakan adalah keypress, nah di dalam fungsi dibuat kondisi apakah tombol yang kita tekan itu adalah Enter apa bukan “if (event.keyCode == 13)”, kalo benar yang ditekan adalah tombol Enter maka akan menjalankan perintah selanjutnya yaitu

“document.getElementById(ID).focus();”

mencari textbox dengan ID (getElementById(ID)) yang kita kirimkan tadi, kalo kita memasukan

onkeypress="nextfield('Nama_Supplier')

maka ketika kita menekan tombol Enter maka kursor akan menuju ke textbox Nama Supplier.
..Semoga Bermanfaat..