Using arrows-keys to navigate and select text in input box

Question

as explain on solution for the issue: Using arrows-keys to navigate

http://jsfiddle.net/BdVB9/

I have same table with some text input, and I got some problem to select text in input box in tables cells during navigating between cells.

can any one help me to solve it? navigation works fine but not select text in input box!!! and also i want to navigate only between cells that have input-box, not all them

Notes: I just want to navigate between cells that have text input-box.

table codes:

    <table border="1" id="navigate">
    <tbody>
        <tr>
            <td><input type="text" id="1" class="input"></td>
            <td></td>
            <td><input type="text" id="3" class="input"></td>
            <td></td>
            <td><input type="text" id="5" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="6" class="input"></td>
            <td><input type="text" id="7" class="input"></td>
            <td></td>
            <td><input type="text" id="9" class="input"></td>
            <td><input type="text" id="10" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="11" class="input"></td>
            <td><input type="text" id="12" class="input"></td>
            <td></td>
            <td><input type="text" id="14" class="input"></td>
            <td><input type="text" id="15" class="input"></td>
        </tr>
    </tbody>
</table>

and this is my own demon

Answer 1

Take a look at this JQFAQ post How to select a table cell using click or navigation keys? this have some thing you want.

Answer 2

I put together a fiddle with the functionality you specified http://jsfiddle.net/tppiotrowski/L7cm8/10/. I hope I understood your requirements correctly. Let me know if you need any alterations or do not understand the code. Good luck!

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    reCalculate(e);
    rePosition();
    // if key is an arrow key, don't type the user
    // input. if it is any other key (a, b, c, etc)
    // edit the text
    if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
    }
});

$('td').click(function() {
    active = $(this).closest('table').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
}

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');

    var input = $('#navigate tr td').eq(active).find('input').focus();
    scrollInView();
}

function scrollInView() {
    var target = $('#navigate tr td:eq(' + active + ')');
    if (target.length) {
        var top = target.offset().top;

        $('html,body').stop().animate({
            scrollTop: top - 100
        }, 400);
        return false;
    }
}​