用window.document.onkeydown 写一个demo实现上下左右键盘事件 控制光标焦点

以下是一个示例，使用 `window.document.onkeydown` 来监听键盘事件，实现上下左右键控制光标焦点的功能：

<template>
  <div>
    <input ref="input1" type="text" />
    <input ref="input2" type="text" />
    <input ref="input3" type="text" />
    <input ref="input4" type="text" />
  </div>
</template>

<script>
export default {
  mounted() {
    window.document.onkeydown = (event) => {
      const { key } = event;
      switch (key) {
        case "ArrowUp":
          this.moveFocus("up");
          break;
        case "ArrowDown":
          this.moveFocus("down");
          break;
        case "ArrowLeft":
          this.moveFocus("left");
          break;
        case "ArrowRight":
          this.moveFocus("right");
          break;
      }
    };
  },
  methods: {
    moveFocus(direction) {
      const inputs = [
        this.$refs.input1,
        this.$refs.input2,
        this.$refs.input3,
        this.$refs.input4,
      ];

      const focusedElement = document.activeElement;

      let currentIndex = -1;
      if (focusedElement) {
        currentIndex = inputs.findIndex((input) => input === focusedElement);
      }

      let nextIndex;
      switch (direction) {
        case "up":
          nextIndex = currentIndex - 2;
          break;
        case "down":
          nextIndex = currentIndex + 2;
          break;
        case "left":
          nextIndex = currentIndex - 1;
          break;
        case "right":
          nextIndex = currentIndex + 1;
          break;
      }

      if (nextIndex >= 0 && nextIndex < inputs.length) {
        inputs[nextIndex].focus();
      }
    },
  },
};
</script>

在上述示例中，我们监听了 `window.document` 对象的 `onkeydown` 事件，并根据按下的键盘按键来执行相应的操作。在 `moveFocus` 方法中，我们获取了所有的输入框元素，并根据当前焦点元素的位置和移动方向来计算下一个焦点的位置，然后调用 `focus` 方法设置焦点到对应的输入框。

请注意，具体的实现方式可能因你所使用的框架或组件库而有所不同。上述示例是基于 Vue.js 的单文件组件，你可以根据自己的项目需求进行相应的调整。