在按Tab时追加输入字段

Question

I working in an attendance register where I have a table with a date on which the user should enter the work duration like 1 or 1.5 or 2 which means 1 as a full day, 1.5 as one and half day and so on.

The Problem which I am facing is I have javascript where I have given on click to append the input field. but what I am looking for is whenever the user press tab it should go to the next input field.

Please take a look at the screenshot of the layout.

Here is javascript code :

$(function () { 
        $("td").on("click", function() {
        var $this = $(this);
        var tdID = $(this).attr("id");
        var $input = $("<input>", {
        value: $this.text(),
        type: "text",
        style: "width:40px",
        id:"myInput",
        blur: function() { 
        $this.text(this.value);
        saveEidatedData(tdID);
    },
    keyup: function(e) {
     if ((e.which === 13)&&(e.which === 9)) $input.blur();
    },
      }).appendTo( $this.empty() ).focus();
  });
});

Any help will be highly appreciated. Thanks in advance.

Answer 1

I think something like this? You may also use arrow keys, to remove the arrow key functionality just delete it from the 'arr' array

 var sftDown = false; $(document).on({ keydown: function(e) { //37 - 40 = arrows keys //13 = enter //9 = tab ( should auto move with tab) var arr = [9,13,37,38,39,40]; if ( e.which == 16 ) sftDown = true; if ( $.inArray(e.which, arr) !== -1 ) { var main = $(this).closest('#table'); var rows = main.find('tr'); var cells = main.find('input[type="text"]'); var downAmount = cells.length/rows.length; var move = 1; switch (e.which) { case 9: move = 0; break; case 40: case 13: move = downAmount; break; case 38: move = downAmount * -1; break; case 37: move *= -1; break; } if ( sftDown ) move *= -1; var i = cells.index(this) + move; if ( i >= cells.length ) i %= cells.length; if ( i < 0 ) i = cells.length + i; cells[i].focus(); } }, keyup: function(e) { if ( e.which == 16 ) sftDown = false; } },'#table input[type="text"]'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody id="table"> <tr> <td><input type="text" /></td> <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> <td><input type="text" /></td> </tr> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> </tbody> </table> 

Answer 2

instead of doing it in JavaScript, you should populate the day with the text box having attribute of tabindex starting from some number and increment it to +1 for each row it should be start from where the last row tabindex ended.

if you doing it in JavaScript it would take extra time to make it work also you need to place extra checks.

like below example click on the first field and press tab it will move to the next input field.

To do as per my suggestion, it helps you to update time easily for specific day, as well as to populate the day's from array / object data type.

 <tr> <td><input type="text" tabindex="1" value="1" /></td> <td><input type="text" tabindex="2" value="2" /></td> <td><input type="text" tabindex="3" value="3" /></td> </tr> <tr> <td><input type="text" tabindex="4" value="4" /></td> <td><input type="text" tabindex="5" value="5" /></td> <td><input type="text" tabindex="6" value="6" /></td> </tr>