3

今天同事詢問如何在網頁實作以上下左右鍵移動輸入焦點的效果，我寫了一個jQuery解法示範，順便貼出來跟大家分享。

範例中有4x4共16個矩陣狀排列的<input>，我先用each("tr") each("td")為每個<input>標上tabindex。每列的tabindex相差100，如此加減100就可以跳到上下列的同一欄。統一為<input>加上cGridInput Class Name，方便後續以selector一次選取。用live鎖定.cGridInput keydown事件，分別配合上、下、左、右算出移動目標元素的tabindex，接著用.cGridInput[tabindex=?]找到元素觸發focus()取得焦點，大功告成。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Arrow Key Focus Moving</title>
</head>
<body>
<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>   
<script type="text/javascript">
    $(function() {
        var baseIndex = 100;
        $("#tblGrid")
        .find("tr").each(function(r) {
            $(this).find("td").each(function(c) {
                $(this).find("input")
                .attr("tabindex", r * 100 + c + baseIndex)
                .addClass("cGridInput");
            });
        });
        $("#tblGrid .cGridInput").live("keydown", function(evt) {
            var tabIndex = parseInt($(this).attr("tabindex"));
            switch (evt.which) {
                case 38: //上
                    tabIndex -= 100;
                    break;
                case 40: //下
                    tabIndex += 100;
                    break;
                case 37: //左(會導致輸入時無法使用左右移)
                    tabIndex--;
                    break;
                case 39: //右(會導致輸入時無法使用左右移)
                    tabIndex++;
                    break;
                default:
                    return;
            }
            if (tabIndex > 0) {
                $(".cGridInput[tabindex=" + tabIndex + "]").focus();
                return false;
            }
            return true;
        });
    });
</script>
<table id="tblGrid">
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
</table>
</body>
</html>

[2011-11-23更新]補上用左右鍵移動焦點的寫法


Comments

# by topcat

小喵稍微改寫一下，用自訂的屬性來判斷群組，這樣就可以不必用baseIndex來紀錄要移動多少。相關網址如下： http://www.dotblogs.com.tw/topcat/archive/2009/12/14/12434.aspx

# by fan

(會導致輸入時無法使用左右移) 请问这个问题如何解决？

# by Jeffrey

to fan, 我想到比較簡單的方法是避開直接用左右方向鍵，例如改用alt+左右來移動焦點；而更友善的做法可以考慮去追蹤輸入游標在輸入框的位置，移到最右方時再按右等於跳下一欄，輸入游標在最前方時再按左等於跳上一欄，不過由於涉及跨瀏覽器掌握輸入游標的位置，複雜度會再高些。

Post a comment