2009年6月11日 星期四

[Asp.Net] 網頁如何在 Enter 鍵被按下時，改成 Tab 鍵

客戶原本使用 AS400 的系統，非常習慣輸入後按 Enter 鍵，游標會移到下一個輸入框。
這個在Windows 上是不make sense的。但不管在 WinForm，甚至是 Web Form，都有客戶這樣要求。
原因當然是：讓操作人員在新舊系統上的操作具一致性。

在 Asp.net 上要怎麼做呢？由於此行為已經是 client side 的行為了，與伺服器無器。當然需要借重 jQuery  了.
程式碼如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication11._Default" %>

<!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">

    <script src="jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(
            function() {
                $('input[hhh=xxx]').keydown(
            function() {
                if (event.keyCode == 13)
                    event.keyCode = 9;
                if (this.value.length == this.maxLength)
                    event.keyCode = 9;
            });
            }
        );
        
    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        input 1:<asp:TextBox hhh="xxx" ID="TextBox1" runat="server" MaxLength="8"></asp:TextBox><br />
        input 2:<asp:TextBox hhh="xxx" ID="TextBox2" runat="server"></asp:TextBox><br />
        input 3:<asp:TextBox hhh="xxx" ID="TextBox3" runat="server"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="Submit it" UseSubmitBehavior="false" />
    </div>
    </form>
</body>
</html>

重點如下：

  1. function myKeyDown 將 Enter 鍵改成 Tab 鍵，另外，當 text 輸入的長度已達 maxLength 時，也強迫改成 Tab 鍵
  2. 當 document ready 後，將具有 hhh 屬性值為 xxx 的 input ，當 keydown 事件發生時，呼叫  myKeyDown
  3. 之後需要這樣行為的 text box，只需增加 hhh=’xxx’ 的 attribute 即可
張貼者： 於
標籤： ,

1 則留言:

匿名 提到...

Hi~ 好久不見了
我是跑到PIC的前同事
上個專案也遇到了
解決方法和你一樣 user最大

下個專案會用到jquery
正在跟google大神學習 找到你這來啦
加油吧~

2010年7月23日 下午2:19

張貼留言

訂閱： 張貼留言 (Atom)

Share with Facebook