CODEWITHSUNDEEP
javascriptjquery
vikas
vikas

Reputation: 337

How to use arrow key to go different text box in gridview

I have a gridview, in that I have 3 text box in each row. If I keypress down arrow it should go to next row textbox If I press uparrow key then it should go previous row textbox. same for left and right arrow key.

This is my code.

<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 derived code

' <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%;">'

Upvotes: 4

Views: 2158

Answers (1)

Spork
Spork

Reputation: 1651

Without HTML this is more guesswork than it could have been, but it seems like row.closest('td').next() is not getting the TD you're looking for.

Try: ...

{
    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();
}

Edit: With the HTML in place it seems to me like the issue at hand is $(this) not being your currently focused element, as you expect it to be, but rather the $(document), where you're firing the keydown event for. Try selecting the focused element first:

$(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();
        }
    });
});

Upvotes: 2

Related Questions