Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    move an input field through a table using the TAB SHIFT-TAB keys

    Here is a short example on how you can move an input field through a table
    using the TAB SHIFT-TAB keys.

    The idea is to have the table as part of a form and placing one form field
    right before the table, and one input field at the end of the table.

    If you have then an input field inside a table cell, and you press TAB or SHIFT-TAB,
    one of the input fields of the surrounding form will get the focus.

    For these two fields the onfocus callback will then fire a click event for the next
    table cell in line.

    For very large table you might notice that the entire table is moved back and forth when the
    onfocus callback is working. If this is the case you have to move both jump fields closer to the
    input field in the table.
    This could be done within the cellEdit funcion.

    Code:
    <!DOCTYPE HTML>
    <head>
        <style type='text/css'>
            .jumpField{
                border: 0px;
                font-size:0.1rem;
                margin:0;
                padding:0;
                z-index:-1;
            }
        </style>
    </head>
    <html>
        <body>
            <form id='aForm' name='theForm'>
                <input id='backTab' class='jumpField' type='text' size='1' maxlength='1'  >
                <table id="t" border="1">
                    <tr><th>Column 0</th><th>Column 1</th><th>column 2</th><th>Column 3</th></tr>
                    <tr><td></td><td>2asasa</td><td>3asasa</td><td>4asasa</td></tr>
                    <tr><td></td><td>2asasa</td><td></td><td>Yes</td></tr>
                    <tr><td>row1<br>row2</td><td>2asasa</td><td>3asasa3asasa3asasa3asasa</td><td>4asasa</td></tr>
                    <tr><td></td><td>2asasa</td><td>3asasa</td><td></td></tr>
                    <tr><td></td><td>2asasa</td><td>3asasa</td><td>4asasa</td></tr>
                </table>
                <input id='forwTab' class='jumpField' type='text' size='1' maxlength='1'  >
            </form>
        </body>
    </html>
    <script>
    
        !function demoJump() {
            var ri, ci, in_input = false;
    
            var theTable = document.getElementById('t');
            theTable.onclick = cellEdit;
    
            document.getElementById('forwTab').onfocus = function() {
                clickJump(1);
            };
            document.getElementById('backTab').onfocus = function() {
                clickJump(-1);
            };
    
    
            function cellEdit(e) {
                var td, value, cell;
                if (!e) {
                    e = window.event;
                }
                td = (e.target) ? e.target : e.srcElement;
                if (td.tagName !== 'TD' && td.tagName !== 'IMG') {
                    return;
                }
                ///////////////////////////////////////////
                ///// any previous input to process
                ///////////////////////////////////////////
                if (in_input) {
                    cell = theTable.rows[ri].cells[ci];
                    value = document.getElementById('theField').value;
                    cell.innerHTML = value;
                }
                in_input = false;
                ///////////////////////////////////
                ////// global coordinates fro current cell
                ///////////////////////////////////
                ri = td.parentNode.rowIndex;
                ci = td.cellIndex;
                /////////////////////////////////////////////
                ///// single line input field //////////////
                /////////////////////////////////////////////
                td.innerHTML = "<input id=theField type=text size=20 amxlength=40 value='" + td.innerHTML + "'>";
                in_input = true;
                td.childNodes[0].focus();
            }
    
            function clickJump(dir) {
                /********************/
                var r, nr, nc, c, fireOnThis, evtObj;
                var cell = theTable.rows[ri].cells[ci];
    
                ///////////////////////////////////////
                //// cell index c is moved left or right
                ///////////////////////////////////////
                c = cell.cellIndex + dir;
                r = cell.parentNode.rowIndex;
                nr = theTable.rows.length;
                nc = theTable.rows[0].cells.length;
    
                ////////////////////////////////////
                /// check crossing of any edges
                ///////////////////////////////////
                if (c >= nc) {
                    c = 0;
                    r++;
                    r = (r > nr - 1) ? 1 : r;
                } else if (c < 0) {
                    c = nc - 1;
                    r--;
                    r = (r < 1) ? nr - 1 : r;
                }
                /////////////////////////////////////////////////
                //// prepare and fire a click event 
                //   on the nect cell
                /////////////////////////////////////////////////
                fireOnThis = theTable.rows[r].cells[c];
                if (document.createEventObject) {
                    evtObj = document.createEventObject();
                    fireOnThis.fireEvent('onclick', evtObj);
                } else if (document.createEvent) {
                    evtObj = document.createEvent('MouseEvents');
                    evtObj.initEvent('click', true, true);
                    fireOnThis.dispatchEvent(evtObj);
                }
            }
        }()
    </script>
    Last edited by hgs; 08-05-2013 at 11:34 AM. Reason: additional information
    My site
    If you’re doing software development right, you’re probably doing Agile wrong.
    -- Isaac Schlueter


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •