none
键盘方向键使用受限制第二问! RRS feed

  • 问题

  • 下面是利用键盘方向键在GridView的各个单元格之间移动的代码,在使用中发现有一种特殊情况会限制它的作用。例如,GridView有TextBox和Lable两种控件,现在焦点在TextBox1,TextBox1的右边是Label1、TextBox2,我按一下向右的方向键,焦点无法跨过Label1跳到TextBox2,必须按Tab键才行。不知道有没有办法完善。请大家帮忙看下,谢谢!

    ------------------------图1(“05实收”不能右移到“01收入”)-----------------


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年5月25日 3:11

答案

  • 不好意思。。写错了个地方...下面代码能正确运行!你试试看!

    <%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <script type="text/javascript">
            function enter(obj) {
                var tr = obj.parentNode.parentNode;
                if (event.keyCode == 40) //向下的时候
                {
                    if (tr.rowIndex < tr.parentNode.rows.length - 1)
                        tr.parentNode.rows[tr.rowIndex + 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    return;
                }
                if (event.keyCode == 37) //向左的时候
                {
                    if (obj.parentNode.cellIndex > 0) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        while (!(node.nodeName == "INPUT"||node.nodeName == "TEXTAREA") && obj.parentNode.cellIndex - 1 >= 0) {
    
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        }
                        node.focus();
                        node.select();
    
    
                    }
                    return;
    
                }
                if (event.keyCode == 39) //向右的时候
                {
                    if (obj.parentNode.cellIndex < tr.cells.length - 1) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                        while (!(node.nodeName == "INPUT" || node.nodeName == "TEXTAREA") && obj.parentNode.cellIndex < tr.cells.length - 1) {
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                        }
                        node.focus();
                        node.select();
                    }
                    return;
                }
                if (event.keyCode == 38) //向上的时候
                {
                    if (tr.rowIndex > 1)
                        tr.parentNode.rows[tr.rowIndex - 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    return;
    
                }
            }</script>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>
            gridview like excel using the arrow key
        </h2>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别22">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="年龄">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("age") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别11">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                            <asp:TemplateField HeaderText="性别11">
                    <ItemTemplate>
                  
                        <textarea id="TextArea1" cols="20" onkeyup="enter(this)" rows="2"></textarea>
                  </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </asp:Content>
    

    2012年5月31日 13:38
    版主

全部回复

  • 啊哈  你用的是我上次提供给你的代码吧...

    优化一下 判断是否是label 如果是  就继续向下一个跳..这样就OK了

    2012年5月25日 6:20
    版主
  • 确实是用的您提供的代码,可是至今那段代码我都没看懂,更何况是再加个Label的判断,更不知道该怎么写了。。。(脚本编写方面我还是一片空白,想请您补完一下,谢谢 呵呵!)

        <script type="text/javascript">
            function enter(obj) {
                var tr = obj.parentNode.parentNode;
                if (event.keyCode == 40) //向下的时候
                {
                    if (tr.rowIndex < tr.parentNode.rows.length - 1)
                        tr.parentNode.rows[tr.rowIndex + 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    tr.parentNode.rows[tr.rowIndex + 1].cells[obj.parentNode.cellIndex].children[0].select();
                    return;
                }
                if (event.keyCode == 37) //向左的时候
                {
                    if (obj.parentNode.cellIndex > 0)
                        tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - 1].children[0].focus();
                    tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - 1].children[0].select();
                    return;
    
                }
                if (event.keyCode == 39) //向右的时候
                {
                    if (obj.parentNode.cellIndex < tr.cells.length - 1)
                        tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + 1].children[0].focus();
                    tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + 1].children[0].select();
                    return;
    
                }
                if (event.keyCode == 38) //向上的时候
                {
                    if (tr.rowIndex > 1)
                        tr.parentNode.rows[tr.rowIndex - 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    tr.parentNode.rows[tr.rowIndex - 1].cells[obj.parentNode.cellIndex].children[0].select();
                    return;
    
                }
            }</script>


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年5月25日 6:33
  • 稍等我写下示例给你看看!

    我写一个向左的,让你锻炼一下 写出其他的

           if (event.keyCode == 37) //向左的时候
                {
                    if (obj.parentNode.cellIndex > 0) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        while (node.nodeName != "INPUT" && obj.parentNode.cellIndex - 1 >= 0) {
    
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        }
                        node.focus();
    
                    }
                    return;
    
                }

    2012年5月25日 7:13
    版主
  •      根据您的代码我山寨了一下 ,还是存在问题。
    有两个问题:

    1.移动后全选单元格内容的功能有时候会失效。我在 node.focus().后面加了select();一开始还可以用,但不一会这个全选的功能就消失了。
    2.向右移动到了最后倒数第3个单元格就不能再往右边移动了。
    下面是截图和代码,呵呵!看来我山寨技术有待提高,请帮忙看看,谢谢!             
    ----------------------图1-----------------------

    if (event.keyCode == 37) //向左的时候
                    {
                        if (obj.parentNode.cellIndex > 0) {
                            var i = 1;
                            var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                            while (node.nodeName != "INPUT" && obj.parentNode.cellIndex - 1 >= 0) {
                                i++;
                                node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                            }
                            node.focus().select();
                        }
                        return;
    
                    }
                    if (event.keyCode == 39) //向右的时候
                    {
                        if (obj.parentNode.cellIndex < tr.cells.length - 1) {
                            var i = 1;
                            var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                            while (node.nodeName != "INPUT" && obj.parentNode.cellIndex < tr.cells.length - 1) {
                                i++;
                                node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                            }
                            node.focus().select();
                        }
                        return;
                    }


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年5月29日 6:43
  • 我本地测试了下你写的代码

    1、无法选中是因为要分开写的

         node.focus();
         node.select();

    2、没有发现此类问题...代码如下..可以替换下上次的项目既可!

    <%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <script type="text/javascript">
            function enter(obj) {
                var tr = obj.parentNode.parentNode;
                if (event.keyCode == 40) //向下的时候
                {
                    if (tr.rowIndex < tr.parentNode.rows.length - 1)
                        tr.parentNode.rows[tr.rowIndex + 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    return;
                }
                if (event.keyCode == 37) //向左的时候
                {
                    if (obj.parentNode.cellIndex > 0) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        while (node.nodeName != "INPUT" && obj.parentNode.cellIndex - 1 >= 0) {
    
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        }
                        node.focus();
                        node.select();
    
    
                    }
                    return;
    
                }
                if (event.keyCode == 39) //向右的时候
                {
                    if (obj.parentNode.cellIndex < tr.cells.length - 1) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                        while (node.nodeName != "INPUT" && obj.parentNode.cellIndex < tr.cells.length - 1) {
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                        }
                        node.focus();
                        node.select();
                    }
                    return;
                }
                if (event.keyCode == 38) //向上的时候
                {
                    if (tr.rowIndex > 1)
                        tr.parentNode.rows[tr.rowIndex - 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    return;
    
                }
            }</script>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>
            gridview like excel using the arrow key
        </h2>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别22">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="年龄">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("age") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别11">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </asp:Content>
    

    2012年5月29日 15:34
    版主
  • 昨天忘记把截图发上来了。请看:焦点到了图中那个位置,遇到了最后那个Label,就不能再往右移了。

    您可以在http://social.msdn.microsoft.com/Forums/zh-CN/295/thread/ac01d556-e3fd-4382-b8c8-6686c7d7e436的代码来测试,就能发现这个问题。

    ----------------------------图1-----------------------------


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年5月30日 0:34
  • 你最后2个貌似是用的textarea?

    如果是的话 while 语句要改下

    "TEXTAREA"

      while ((node.nodeName != "INPUT"||node.nodeName != "TEXTAREA") && obj.parentNode.cellIndex < tr.cells.length - 1)

    这样就OK了..

    2012年5月30日 6:00
    版主
  • 那两栏是显示界面里的最后两栏,但不是数据库的最后两列,我是隐藏了后面的列!

    下面是这两列(合同备注、财务备注)的前台代码,并不是什么TextArea吧?不过他们的TextMode="MultiLine"。我测试过了,遇到TextMode="MultiLine"的情况,按方向键会跳过这些格子。

    <asp:TemplateField HeaderText="合同备注" 
                                    SortExpression="ContractRemarksR">
                                    <ItemTemplate>
                                        <asp:TextBox ID="TextBox_ContractRemarksR" runat="server" 
                                            Text='<%# Bind("ContractRemarksR") %>' onkeyup="enter(this)" TextMode="MultiLine" 
                                            Font-Size="Smaller" Height="30px" Width="100px"></asp:TextBox>
                                    </ItemTemplate>
                                    <HeaderStyle Font-Size="Smaller" />
                                </asp:TemplateField>

    <asp:TemplateField HeaderText="财务备注" 
                                    SortExpression="ReceivableReMarks">
                                    <ItemTemplate>
                                        <asp:TextBox ID="TextBox_ReceivableReMarks" runat="server" 
                                            Text='<%# Bind("ReceivableReMarks") %>' onkeyup="enter(this)" TextMode="MultiLine" 
                                            Font-Size="Smaller" Height="30px" Width="100px"></asp:TextBox>
                                    </ItemTemplate>
                                    <HeaderStyle Font-Size="Smaller" />
                                </asp:TemplateField>


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!


    2012年5月30日 7:58
  • 是的...因为加了TextMode="MultiLine"后 生成的是

    TEXTAREA

    按照我下面这么写?试过了么?

      while ((node.nodeName != "INPUT"||node.nodeName != "TEXTAREA") && obj.parentNode.cellIndex < tr.cells.length - 1)

    2012年5月31日 0:09
    版主
  • 按照您的提示,我修改了,但是方向键失去了作用,就好像没有这个脚本一样的效果。

    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年5月31日 7:56
  • 不好意思。。写错了个地方...下面代码能正确运行!你试试看!

    <%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <script type="text/javascript">
            function enter(obj) {
                var tr = obj.parentNode.parentNode;
                if (event.keyCode == 40) //向下的时候
                {
                    if (tr.rowIndex < tr.parentNode.rows.length - 1)
                        tr.parentNode.rows[tr.rowIndex + 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    return;
                }
                if (event.keyCode == 37) //向左的时候
                {
                    if (obj.parentNode.cellIndex > 0) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        while (!(node.nodeName == "INPUT"||node.nodeName == "TEXTAREA") && obj.parentNode.cellIndex - 1 >= 0) {
    
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex - i].children[0];
                        }
                        node.focus();
                        node.select();
    
    
                    }
                    return;
    
                }
                if (event.keyCode == 39) //向右的时候
                {
                    if (obj.parentNode.cellIndex < tr.cells.length - 1) {
                        var i = 1;
                        var node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                        while (!(node.nodeName == "INPUT" || node.nodeName == "TEXTAREA") && obj.parentNode.cellIndex < tr.cells.length - 1) {
                            i++;
                            node = tr.parentNode.rows[tr.rowIndex].cells[obj.parentNode.cellIndex + i].children[0];
                        }
                        node.focus();
                        node.select();
                    }
                    return;
                }
                if (event.keyCode == 38) //向上的时候
                {
                    if (tr.rowIndex > 1)
                        tr.parentNode.rows[tr.rowIndex - 1].cells[obj.parentNode.cellIndex].children[0].focus();
                    return;
    
                }
            }</script>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>
            gridview like excel using the arrow key
        </h2>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("name") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别22">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="年龄">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" Text='<%# Eval("age") %>' onkeyup="enter(this)" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="性别11">
                    <ItemTemplate>
                        <asp:Label ID="TextBox1" Text='<%# Eval("sex") %>' onkeyup="enter(this)" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                            <asp:TemplateField HeaderText="性别11">
                    <ItemTemplate>
                  
                        <textarea id="TextArea1" cols="20" onkeyup="enter(this)" rows="2"></textarea>
                  </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </asp:Content>
    

    2012年5月31日 13:38
    版主