ASP.NET & JQuery Tips (#2)

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:

clip_image002

<%@ 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" />&nbsp;
            <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.

clip_image003

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s