使用箭头键导航答案

【问题标题】：Navigate using Arrow Keys使用箭头键导航
【发布时间】：2013-01-06 19:50:54
【问题描述】：

我正在使用这个 Gridview

http://gridviewscroll.aspcity.idv.tw/Demo/Style.aspx#StyleCustom2

谁能告诉我如何使用箭头键导航到 GridView 到该网格视图

谢谢:)

【问题讨论】：

你能展示你现在拥有的东西以及你的脚本失败的地方吗？使用方向键可以触发警报吗？

标签： asp.net jquery-ui jquery jquery-plugins

【解决方案1】：

使用您想要扩展功能的 GridView 编辑网络表单。在那里，添加两个按钮。 ButtonUp 和 ButtonDown。

为按钮添加以下点击事件。我假设您的 GridView 称为 GridView1：

            protected void ButtonUp_Click(object sender, EventArgs e) {
        int i = GridView1.SelectedIndex;
        if(i>0)
        GridView1.SelectedIndex = GridView1.SelectedIndex - 1;
        }

        protected void ButtonDown_Click(object sender, EventArgs e) {
        int i = GridView1.SelectedIndex;
        if (i < GridView1.Rows.Count - 1)
        GridView1.SelectedIndex = GridView1.SelectedIndex + 1;
        }

如果您现在运行您的页面，您可以使用页面上的按钮在 GridView 中导航。现在，我们将通过 javascript 将按钮点击绑定到我们的键盘。将以下代码添加到 Page_Load 事件中：

                ClientScript.RegisterClientScriptBlock(typeof(string), "keyScript",
        @"function move(e) {
        var key = 0;
        if(window.event)
        key = event.keyCode;
        else
        key = e.keyCode;
        if(key == 38)
        document.getElementById('ButtonUp').click();
        if(key == 40)
        document.getElementById('ButtonDown').click();
        }
        document.onkeydown=move;
        ", true);

现在您应该可以使用键盘的上下键进行导航了。
要使页面按钮不可见，请为它们创建以下 CssClass：
```
.Invisible {
     display:none;
 }
```

【讨论】：

仍在寻找解决方案

【解决方案2】：

<script type="text/javascript">
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which;
        var arrow = { left: 37, up: 38, right: 39, down: 40 };
        switch (keyCode) {
            case arrow.left:
                break;
            case arrow.up:
                document.getElementById(('<%= ButtonUp.ClientID %>')).click();
                break;
            case arrow.right:
                break;
            case arrow.down:
                //alert("down");
                document.getElementById(('<%= ButtonDown.ClientID %>')).click();
                break;
        }
    });
</script>

【讨论】：