jQuery : (二) 如何利用方向鍵在輸入控制項間移動

2009-10-15

6898
0
ASP.NET

如何利用方向鍵在輸入控制項間移動的語法分享

之前寫專案的時候，曾經有一個需求希望在TextBox控制項利用方向鍵移動，
下面是我寫的語法，跟大家分享

語法

javascript部分

$(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(tbstyle);
    }
    tbstyle();
});

function tbstyle() {    
    //tbkeyable
    $('.tbkeyable tr').each(function(index) {
        $(this).attr('tbkeyid', index);
        $(this).find(':text').each(function(index) {
            $(this).attr('tbkeyid', index);
            $(this).keyup(function(event) {
                switch (event.keyCode) {
                    case 37:
                        {
                            var tbkeyid = Number($(this).attr('tbkeyid')) - 1;
                            $(this).closest('tr').find(':text[tbkeyid="' + tbkeyid + '"]').focus().select();
                            break;
                        }
                    case 39:
                        {
                            var tbkeyid = Number($(this).attr('tbkeyid')) + 1;
                            $(this).closest('tr').find(':text[tbkeyid="' + tbkeyid + '"]').focus().select();
                            break;
                        }
                    case 40:
                        {
                            var tbkeyid = $(this).attr('tbkeyid')
                            var row = Number($(this).closest('tr').attr('tbkeyid')) + 1;
                            $(this).closest('table').find('tr[tbkeyid="' + row + '"]').find(':text[tbkeyid="' + tbkeyid + '"]').focus().select();
                            break;
                        }
                    case 38:
                        {
                            var tbkeyid = $(this).attr('tbkeyid')
                            var row = Number($(this).closest('tr').attr('tbkeyid')) - 1;
                            $(this).closest('table').find('tr[tbkeyid="' + row + '"]').find(':text[tbkeyid="' + tbkeyid + '"]').focus().select();
                            break;
                        }
                }
            });
        });
    });
}

html部分

     <table class="tbkeyable">
        <tr>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
            <td>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
        </tr>
    </table>

使用方式

先引用jQuery 1.3.x版本
在想要設置方向鍵移動的Table加上 class="tbkeyable"
完工

說明

一開始有用到我另一篇介紹 ASP.NET : 如何在UpdatePanel觸發AsynPostBack後執行Javascript 的技巧，加上了這段

$(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(tbstyle);
    }
    tbstyle();
});

並且把真正實作方向鍵移動的語法，包在 tbstyle 的 function 裡，
是為了如果使用的時候，如果剛好有在UpdatePanel內，
可以在AsynPostBack後，繼續順利使用。
我自己在寫這類需求時，會把相關的語法放在一份.js檔裡，
當頁面有需要的時候，再去引用那個.js檔，
就可以很方便的在各頁面使用。

此篇範例是用在Table內的輸入控制項，各位可以改寫一下去符合其他情境

如果您覺得這篇文章有幫助，請您幫忙推薦一下或按上方的"讚"給予支持，非常感激
歡迎轉載，但請註明出處
文章內容多是自己找資料學習到的心得，如有不詳盡或錯誤的地方，請多多指教，謝謝

回首頁