Question

我有一个gridview，因为每行有3个文本框。如果我按下向下箭头，它应该转到下一行文本框如果我按向上键，那么它应该去前一行文本框。左右箭头键相同。

这是我的代码。

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("body").keydown(function (e) {
            var row;
            debugger;
            if (e.keyCode == 39) {
                row = $(this).closest('td').next();
                row.find('input').focus();
            }
            else if (e.keyCode == 37) {
                row = $(this).closest('td').prev();
                row.find('input').focus();
            }
            else if (e.keyCode == 40) //down arrow key code
            {
                row = $(this).closest('tr').next();
                row.closest('td').next().find('.masked').focus();
            }
            else if (e.keyCode == 38) // up arrow key code
            {
                row = $(this).closest('tr').next();
                row.closest('td').prev().find('.masked').focus();
            }
        }); //this code detect is it up or down arrow
    });

</script>

HTML派生代码

' <tr>
<td style="width:1%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:5%;">
<input id="ContentPlaceHolderMain_grdDistanceLog_txttime_0" class="masked ui-mask" type="text" style="width:50px;display:block;" maxlength="8" name="ctl00$ContentPlaceHolderMain$grdDistanceLog$ctl02$txttime">
<span id="ContentPlaceHolderMain_grdDistanceLog_lbltime_0" style="display:none;"></span>
</td>
<td style="width:3%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:7%;">
<td style="width:3%;">
<td style="width:4%;">
</tr>
<tr class="alt">
<td style="width:1%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:3%;">
<td style="width:5%;">
<input id="ContentPlaceHolderMain_grdDistanceLog_txttime_1" class="masked ui-mask" type="text" style="width:50px;display:block;" maxlength="8" name="ctl00$ContentPlaceHolderMain$grdDistanceLog$ctl03$txttime">
<span id="ContentPlaceHolderMain_grdDistanceLog_lbltime_1" style="display:none;"></span>
</td>
<td style="width:3%;">'

Answer 1

如果没有HTML，这可能会比以前更加猜测，但看起来像是row.closest（'td'）。next（）没有得到你正在寻找的TD。

尝试： ...

{
    row = $(this).closest('tr').next();
    row.find('td').find('.masked').focus();
}
else if (e.keyCode == 38) // up arrow key code
{
    row = $(this).closest('tr').next();
    row.find('td').find('.masked').focus();
}

编辑：随着HTML的到位，在我看来，现在的问题是$（这个）不是你当前关注的元素，正如你所期望的那样，而是$（文档），你在那里解雇了keydown事件。首先尝试选择聚焦元素：

$(document).ready(function () {
    $("body").keydown(function (e) {
        var row;
        var focusedElement = $(document.activeElement);
        debugger;
        if (e.keyCode == 39) {
            row = $(focusedElement).closest('td').next();
            row.find('input').focus();
        }
        else if (e.keyCode == 37) {
            row = $(focusedElement).closest('td').prev();
            row.find('input').focus();
        }
        else if (e.keyCode == 40) //down arrow key code
        {
            row = $(focusedElement).closest('tr').next();
            row.find('td').find('.masked').focus();
        }
        else if (e.keyCode == 38) // up arrow key code
        {
            row = $(focusedElement).closest('tr').next();
            row.find('td').find('.masked').focus();
        }
    });
});

如何使用箭头键在gridview中转到不同的文本框

1 个答案: