2009年7月3日 星期五

網頁如何在 Enter 鍵被按下時，改成 Tab 鍵 Version 2

上一回，筆者有提到一篇 [Asp.Net] 網頁如何在 Enter 鍵被按下時，改成 Tab 鍵。
這一個小技巧的確有效，可是有人提到「如何再加上自動跳下一個 textbox」？

這是什麼意思呢？例如在輸入電話號碼時，格式為 (02)87121298。在設計頁面時，會產生如下畫面。

需求

當輸完 035 後，由於區碼最多三碼，系統應將游標自動跳到下一個 textbox

image

當輸完02後，使用者可以按 Enter 或 Tab 鍵將游標自動跳到下一個 textbox

image

解法

修改上一篇的解法，並加入在 http://wnas.nl/ 找到的 autotab 功能後，修改如下

WebForm1.aspx

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

<!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></title>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script src="autotab.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="vertical-align:middle">
        請輸入電話號碼(<asp:TextBox sam="xxx" ID="TextBox1" runat="server" MaxLength="3" 
            Width="26px"></asp:TextBox>)
        <asp:TextBox sam="xxx" ID="TextBox2" runat="server" MaxLength="8" Width="66px"></asp:TextBox>
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(
            function() {
                $('input[sam]').autotab();
            }
        );
    </script>
</body>
</html>

autotab.js

jQuery.fn.autotab = function() {
    jQuery(this).keyup(function(e) {
        switch (e.keyCode) {
            // ignore the following keys 
            case 9: // tab
                return false;
            case 16: // shift
                return false;
            case 20: // capslock
                return false;
            default: // any other keyup actions will trigger 
                var maxlength = jQuery(this).attr('maxlength'); // get maxlength value
                var inputlength = jQuery(this).val().length; // get the length of the text
                if (inputlength >= maxlength) { // if the text is equal of more than the max length
                    jQuery(this).nextAll('input[sam]:first').focus(); // set focus to the next text field
                }
        }
    }).keydown(function(e) {
        if (event.keyCode == 13)
            event.keyCode = 9;
        }
    );
}
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

Share with Facebook