Question

我想在不使用制表符的情况下遍历包含输入字段的表。

作为选项卡，仅从右侧进行迭代。

我需要使用键盘箭头来遍历输入字段。

<td class="td-pad" *ngFor="let size of sizeRange;">
    <div class="input-group">
        <input type="" class="form-control fs-tr" (change)="changeSelectedQuantity('F',size)" [(ngModel)]="selectedStock[stock]['F'][size]" [disabled]="availableStock[stock]['F'][size]<=0" >
        <div class="input-group-append">
                <span class="input-group-text">/ {{availableStock[stock]['F'][size] ? availableStock[stock]['F'][size] : 0}}</span>
        </div>
    </div>
</td>

Answer 1

我有一个下面的代码，出于相同的要求，我们在一个应用程序中使用了该代码

使用递归遍历DOM，以检查元素是“ tr”还是“ td”，然后根据按键找到下一个或上一个同级。然后获取孩子的输入来设置焦点。

希望这会有所帮助

const NEXT = "next",
  PREV = "prev",
  UP = "up",
  DOWN = "down",
  TR = "tr",
  TD = "td";

function arrowPressed(element, type, nName) {
  var newElement = getInput(element, type, nName);
  if (newElement != undefined && newElement != null) {
    if (newElement.disabled) {
      arrowPressed(newElement, type, nName)
    } else {
      newElement.focus();
    }
  }
}

function getInput(element, type, nName) {
  if (element != null && element.nodeName.toLowerCase() == nName) {
    if (element.nextElementSibling != null && (type == NEXT || type == DOWN)) {
      return element.nextElementSibling.querySelector('.kd-input');
    } else if (element.nextElementSibling == null && type == NEXT) {
      return getInput(element.parentElement, DOWN, TR);
    } else if (element.previousElementSibling != null && (type == PREV || type == UP)) {
      return element.previousElementSibling.querySelector('.kd-input');
    } else if (element.previousElementSibling == null && type == PREV) {
      return getInput(element.parentElement, UP, TR);
    }
  } else {
    return getInput(element.parentElement, type, nName);
  }
  return null;
}

document.onkeydown = function(evt) {
  evt = evt || window.event;
  if (evt.target && evt.target.className == 'kd-input') {
    switch (evt.keyCode) {
      case 37:
        arrowPressed(evt.target, PREV, TD);
        break;
      case 39:
        arrowPressed(evt.target, NEXT, TD);
        break;
      case 38:
        arrowPressed(evt.target, UP, TR);
        break;
      case 40:
        arrowPressed(evt.target, DOWN, TR);
        break;
    }
  }
};

<table>
  <tr>
    <th>Input1</th>
    <th>Input2</th>
    <th>Input3</th>
    <th>Input4</th>
    <th>Input5</th>
  </tr>
  <tr>
    <td><input class="kd-input"></td>
    <td><input class="kd-input" disabled></td>
    <td><input class="kd-input" disabled></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input"></td>
  </tr>
  <tr>
    <td><input class="kd-input"></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input" disabled></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input" disabled></td>
  </tr>
  <tr>
    <td><input class="kd-input" disabled></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input"></td>
  </tr>
  <tr>
    <td><input class="kd-input"></td>
    <td><input class="kd-input"></td>
    <td><input class="kd-input" disabled></td>
    <td><input class="kd-input" disabled></td>
    <td><input class="kd-input"></td>
  </tr>
</table>

如何使用javascript

1 个答案: