Pada tips kali ini kita akan membuat auto focus pada textbox pertama dan berpindah tab dengan menggunakan tombol enter. Pada beberapa kasus tertentu, seperti aplikasi POS (Point Of Sale), user membutuhkan berpindah tab dengan menekan tombol enter.
1. Tambahkan Web Form dengan nama FocusEnter.aspx, kemudian tambahkan kode berikut:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FocusEnter.aspx.cs" Inherits="FocusEnter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Auto Focus dan Enter Tab</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input:text:first').focus();
$('input:text').bind("keydown", function (e) {
if (e.which == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
$('input:text')[nextIndex].focus();
}
});
$('#btnReset').click(function () {
$('#form')[0].reset();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<br />
<label for="txtNama">Nama :</label><br />
<asp:TextBox ID="txtNama" runat="server" /><br /><br />
<label for="txtAlamat">Alamat :</label><br />
<asp:TextBox ID="txtAlamat" runat="server" /><br /><br />
<label for="txtPhone">Phone :</label><br />
<asp:TextBox ID="txtPhone" runat="server" /><br /><br />
<label for="txtEmail">Email :</label><br />
<asp:TextBox ID="txtEmail" runat="server" /><br /><br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
<asp:Button ID="btnReset" Text="Reset" runat="server" /><br /><br />
</fieldset>
</div>
</form>
</body>
</html>
2. Method bind() digunakan untuk menambahkan event handler ‘keydown’ kedalam textbox, kemudian cek jika ada penekanan tombol enter (kode 13), maka index akan ditambah untuk berpindah textbox.
3. Jalankan page diatas, maka pertama kali halaman diload textbox paling awal akan aktif, dan anda dapat berpindah tab dengan menekan tombol enter.
Actual Training 