按Tab键后如何转到上一个单元格？

Question

我想在按下 Tab 键时验证用户输入。它运作良好。但是当用户输入错误的数据时，我想强制他们更新。这意味着我想将焦点放在刚刚编辑的单元格上。

我试过了

cell.getElement().focus()
cell.getElement().click()
cell.navigateLeft()
cell.navigatePrev()

但没有任何效果。

是否可以通过 javascript 模拟按下 Shift + Tab？

还有一个问题为什么

row.update({"c1": fieldValue}) 更新了 c1 列但是
row.update({fieldName: fieldValue}) 没有，fieldName的值为"c1"

如何使用 jsFiddle 进行测试？在 c1 列中键入例如 10+14，然后按 Tab 键。您收到消息说分钟“14”不正常。只允许 0、15、30、45。

    table.on('cellEdited', (cell) => {
      var fieldName = cell.getField()
      var fieldValue = cell.getValue()
      var fieldLength = fieldValue.length
      var row = cell.getRow()
      var acceptedMinutes = [0, 15, 30, 45]

      switch (fieldName) {
        case "c1":
          fieldValue = fieldValue.replace(",", "").replace("+", "").replace(".", "").replace(" ", "")

          switch (fieldLength) {

            case 1:
            case 2:
              fieldValue = fieldValue + ":00"
              break
            case 3:
            case 4:
              var position = fieldLength - 2
              fieldValue = fieldValue.substring(0, position) + ":" + fieldValue.substring(position);
              break

          }

          var tmpArray = fieldValue.split(":")
          if (tmpArray[1]) {
            if (!acceptedMinutes.includes(Number(tmpArray[1]))) {
              console.log("minutes NOT ok")
              cell.getElement().focus()
              //cell.getElement().click()
            } else {
              console.log("minutes ok")
            }
          }
          var hour = Number(tmpArray[0])

          if (hour > -0 && hour < 24) {
            console.log("hours ok")

          } else {

            cell.getElement().click()
            cell.getElement().focus()
            console.log(cell.navigateLeft())
            console.log(cell.navigatePrev())
            console.log(cell.navigateRight())
            console.log("hours NOT ok")
          }


          row.update({ "c1": fieldValue })
          //        row.update({fieldName: fieldValue})

          break
      }
    })

Answer 1

您不能 focus() cell，因为 cell 元素是 div，并且其中没有呈现 input 元素。您可以使用 cell.edit() 来聚焦 input 元素，但是由于 the input element needs time to render，您可以将 edit() 调用包装在 setTimeout() 中。所以它看起来像这样：

setTimeout(function() {
  cell.edit();
}, 100);

JSFiddle

您可以研究的另一种方法是 customize your own key bindings 并禁用 tab 键的默认操作。然后您可以先执行验证，然后使用 navigateNext() 或 navigateRight() 移动到下一个单元格。

按Tab键后如何转到上一个单元格？

How to go to previous cell after pressing tab key?

javascript

tabulator