Question

我在一个出勤登记处工作，我有一张桌子，上面有一个日期，用户应该输入工作时间，如1或1.5或2，这意味着1为一整天，1.5为一天半等等。

我面临的问题是我有javascript，我点击后附加输入字段。但我要找的是每当用户按Tab键时它应该转到下一个输入字段。

请查看布局的屏幕截图。

这是javascript代码：

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

任何帮助都将受到高度赞赏。提前谢谢。

Answer 1

我觉得这样的事情？您也可以使用箭头键删除箭头键功能，只需将其从“arr”中删除即可。阵列

＆＃13;

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"]');

＆＃13;

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

＆＃13;

Answer 2

而不是在JavaScript中执行此操作，您应该使用具有tabindex属性的文本框从某个数字开始填充当天，并将其从最后一行开始的每一行增加到+1。 {1}}结束了。

如果你在JavaScript中这样做，它需要额外的时间才能使它工作，你需要额外的检查。

如下例所示，点击第一个字段，然后按tabindex它将移至下一个输入字段。

根据我的建议，它可以帮助您在特定日期轻松更新时间，以及从数组/对象数据类型填充日期。

＆＃13;

tab

＆＃13;

在按Tab键附加输入字段

2 个答案: