Question

有一个主要内容可编辑div，它显示带有占位符（下划线）的某些模板-其中可能还有其他div，也可以编辑。里面的div有一个类-让我们将其称为突出显示。

我希望能够跳至其中的div并键入。

我给了div内部一个tabIndex，该标签使它们可以显示标签，但除非明确单击它们，否则无法键入。我只想使用键盘就能做到这一点。

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

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

在另一个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();
            }
        }
    });
    .......
}

blur / focus块仅在条件为真时第二次触发-因此，不是在第一次遇到该条件的div时触发。

由于使用了tabIndex，浏览器似乎在进行分页浏览时将注意力集中在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>

在标签上的内容可编辑div中获取focus（）

1 个答案: