Ahmad Masykur

ASP.NET Enter Key Problem

Pada pembuatan sebuah halaman web, terkadang terdapat beberapa input dan beberapa tombol (button). Ketika cursor focus ke sebuah textbox dan tekan tombol Enter, akan terjadi postback ke server. Sebagai contoh bila dalam halaman terdapat dua buah textbox dan dua buah tombol separti pada kode berikut:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button" />

Setelah mengisi TextBox1 dan menekan tombol enter, terjadi postback ke server dan Event Click pada Button1 akan dikerjakan. Begitu *** jika TextBox2 yang diisi dan tombol Enter ditekan, Event Click pada Button1 yang dikerjakan, padahal yang diinginkan adalah Button2 yang harus dikerjakan.

Untuk memecahkan masalah ini, pada ASP.NET 2.0 terdapat property DefaultButton pada Form dan Panel. Dalam kasus ini, digunakan Panel karena kedua TextBox tersebut berada dalam satu Form. Kelompokkan masing-masing inputan beserta default tombolnya ke dalam Panel.

<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" DefaultButton="Button2">
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>

Pada ASP.NET 1.1 diperlukan trik khusus menggunakan Javascript untuk melakukan hal ini. Tambahkan code berikut pada event Load

TextBox1.Attributes.Add("onkeydown", 
    "if(event.which || event.keyCode)" +
    "{if ((event.which == 13) || (event.keyCode == 13)) " +
    "{document.getElementById('"+Button1.UniqueID+"').click();return false;}} " +
    "else {return true}; ");
TextBox2.Attributes.Add("onkeydown", 
    "if(event.which || event.keyCode)" +
    "{if ((event.which == 13) || (event.keyCode == 13)) " +
    "{document.getElementById('"+Button2.UniqueID+"').click();return false;}} " +
    "else {return true}; ");

Pada kode di atas, jika saat kursor sedang berada di TextBox{n}, ketika tombol Enter ditekan (keycode untuk tombol enter adalah 13) maka akan memanggil method click pada Button{n}. Pada Firefox, event.keyCode tidak berjalan dengan baik, sebagai penggantinya digunakan event.which.