Keyboard Events of Arrow Keys

Much like an excel spreadsheet.

by queryj

HTML

<form action="#" method="post">
    <fieldset>
        <table>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
       ...

JavaScript

$(function () {
    $('input[type="text"]').keydown(

    function (e) {
        console.log(e.which);
        if (e.which === 39) {
            var myinput = $(this).val();
            var caretPos = getCaret(this);
            console.log(caretPos);
            if (caretPos === myinput.length) {
                var nextTd = $(this).closest('td').next('td');
                console.log("nextTd", nextTd);
                if (nextTd) {
                    nextTd.find('input:text').focus();
                } else {
                    console.log("find td in next tr");
                    var nextTr = $(this).closest('tr').next("tr");
                    if (nextTr) {
                        nextTr.find("td:eq(0)").find("input:text").focus();
                    }
                }

            } else {
                console.log('else...');
                setCaretPosition(this, caretPos + 1);
            }

            return false;
        }

        if (e.which === 37) {
            var myinput1 = $(this).val();
            var caretposition = getCaret(this);
            if (caretposition === 0) {
                $(this).closest('td').prev('td').find('input:text').focus();
            } else {
                setCaretPosition(this, caretposition - 1);
            }

            return false;
        }
    });

    function getCaret(el) {
        if (el.selectionStart) {
            return el.selectionStart;
        } else if (document.selection) {
            el.focus();
            var r = document.selection.createRange();
            if (r === null) {
                return 0;
            }

            var re = el.createTextRange(),
                rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);
            return rc.text.length;
        }

        return 0;
    }

    function setCaretPosition(elem, caretPos) {
        //var elem = document.getElementById(elemId);
        if (elem !== null)...