4

各行に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%;">'
4

1 に答える 1

2

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が適切に配置されていると、目前の問題は$（this）が現在フォーカスされている要素ではなく、キーダウンを実行している$（document）であるように思われます。のイベント。最初にフォーカスされた要素を選択してみてください。

$(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();
        }
    });
});
于 2013-03-05T09:37:01.823 に答える