javascript - 在选项卡上的内容可编辑 div 内获取 focus()

Question

有一个主要内容可编辑 div，它显示带有占位符(下划线)的某些模板 - 其中可能还有其他可编辑的 div。内部 div 有一个类 - 我们称之为突出显示。

我希望能够通过 Tab 键切换到内部的 div 并进行输入。

我已经给内部 div 一个 tabIndex，这使得它们可以选项卡，但除非我明确单击它们，否则我无法键入。我希望能够仅使用键盘来完成此操作。

PS 我需要一个 JS 解决方案，而不是 Jquery

用输入/或文本区域替换内部 div 效果非常好，除了我想使用 div 或 span

从另一个 stackoverflow 页面，我附加了一个事件监听器，检查 div 是否具有我正在寻找的类，我明确地调用了 .blur() 和 .focus() - 但这不起作用

// partial code relevant to the problem

function contentEdit(text) {
    ....

    // replace placeholder text (underscores) with div
    // and maintain line breaks
    text = text.replace(/(\r\n|\n|\r)/gm, '<br/>')
        .replace(/[_]+/gm, '<div class="highlight" tabindex="0">  </div>');

    vm.content = '<div contenteditable>' + text + '</div>';

    var ce = document.getElementById('contenteditable-div');

    // tried this approach from stackoverflow
    ce.addEventListener('keydown', function(e) {
        if (e.keyCode == 9) {
            if (e.target.className == 'highlight') {
                e.target.blur();
                e.target.focus();
            }
        }
    });
    .......
}

模糊/焦点 block 仅在第二次该条件为真时触发 - 因此，不会在第一次遇到该条件的 div 时触发。

由于 tabIndex，浏览器看起来好像在按 Tab 键浏览时将焦点放在 div 上(其上有边框突出显示)，但除非单击该 div，否则不会触发输入事件。输入或文本区域的情况并非如此 - 由于某种原因，它们也成为焦点，但也接受关键输入。

演示:codepen.io/anon/pen/bPEJjo

有什么想法/建议为什么内部 div 不能接受键盘事件或如何让它们触发？

Answer 1

仅在父元素上监听 keyup(比 keydown 更好的时机)，它会从子元素中冒出来。然后创建焦点元素的范围并将光标设置到其位置。如下所示:

function moveCursor(e) {
    if (e.key !== 'Tab') {return;}
    var element = document.activeElement,
        range = document.createRange(),
        selection = window.getSelection();
    range.setStart(element, 0);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
    element.focus();
}
document.getElementById('pad').addEventListener('keyup', moveCursor);

.ce {
  position: relative;
  width: 300px;
  height: 50px;
  border: 1px solid #000;
  margin-bottom: 1em;
}

<div id="pad" contenteditable="true">
  <div class="ce" tabindex="1"></div>
  <div class="ce" tabindex="2"></div>
  <div class="ce" tabindex="3"></div>
  <div class="ce" tabindex="4"></div>
</div>