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

2019年8月4日 136次阅读

我有一个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%;">'

最佳答案 如果没有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();
        }
    });
});
点赞