收听keydown事件以确定在UI响应之前哪个节点将获得焦点

Question

想象一个具有各种内容和多个节点类型和行的可信任的div。 插入符号目前在第二行锚定/聚焦到<p>节点。

document.getSelection().focusNode

up arrow key被推动，插入符号移动到第一行，并且锚定/焦点到位于先前聚焦的<p>节点“上方”的某个随机节点。

如何在浏览器UI将插入符号移动到该位置之前捕获诸如“keydown”之类的事件来识别目标节点？

目的是禁止插入符号移动到某些位置，避免UI故障。

Answer 1

这是一个有希望让你入门的演示。此演示正在跟踪鼠标点击，但您可以调整它以侦听keydown事件，并在光标焦点更改之前截取箭头键。这个想法是这样的。

1. 使用HTML类来识别用户可以点击并保留光标焦点的cool和uncool元素。

2. 创建一个包含cool（1）和uncool（0）位置的JavaScript数组，用户可以为此获得焦点。

3. 如果用户在冷却块后单击uncool块，焦点将返回到单击的最后一个冷块。如果用户首先单击块（在点击任何其他内容之前），则只需将焦点从非冷却位置移开。

var positions = [];
var elems = document.querySelectorAll(".container > div");
var current_elem = null;

[].forEach.call(elems, function(elem, index) {
  positions.push(elem.classList.contains('cool') ? 1 : 0);
  
  elem.addEventListener("click", function checkPosition() {
    if (positions[index] === 1) {
      current_elem = index+1;
    } else {
      if (current_elem !== null) {
        document.querySelector('.container div:nth-child(' + current_elem + ')').focus();
      } else {
        this.blur();
      }
    }
  });  
});

.container {
  width: 300px;
}
.container > div {
  background: lightgray;
  display: block;
  padding: 1em 0;
  margin-bottom: 1px;
  position: relative;
}

div.uncool {
  background: rgba(255, 0, 0, 0.5);
}

.container,
div.cool:after,
div.uncool:after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
}

div.cool:after {
  content: 'cool';
}

div.uncool:after {
  content: 'uncool';
}

<div class="container">
  <div tabindex="0" class="cool"></div>
  <div tabindex="0" class="uncool"></div>
  <div tabindex="0" class="uncool"></div>
  <div tabindex="0" class="cool"></div>
</div>