javascript - 这个 : After every space key press, 如何创建一个新的跨度元素并将插入符号放在那里？

Question

如何将光标放在一个div和那个div的某个位置。

尝试用 setStar 放置它，但光标位于开头，我不想

错误是:{"message": "Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset}

let written = '';

document.getElementById('parent').addEventListener('keypress', function(e) {
  var palabra = written;
  written += String.fromCharCode(e.which);

  if (e.which === 32) {
    var element = document.getElementById("parent");
    var doc = element.ownerDocument || element.document;

    var win = doc.defaultView || doc.parentWindow;
    // seleccionamos el nodo activo
    var sel = window.getSelection();

    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      const index = range.startOffset;
      // range.setStart(document.getElementById(window.getSelection().anchorNode.parentNode.id), index);
    }
    sel.focusNode.textContent = sel.focusNode.textContent.replace(palabra, "");
   
  }
})

#parent>div {
  border-color: yellow;
  float: left;
}

.root {
  padding-right: 1px;
}

<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <div class="root" id="1">Que</div>
  <div class="root" id="2">word</div>
  <div class="root" id="3">Lorem</div>
  <div class="root" id="4">Ipsum</div>
</div>

我想放入节点 document.getElementById(window.getSelection().anchorNode.parentNode.id)

并且你的节点位置保存在变量index

示例:

当我输入“hi”并按下空格键时，结果应该是这样吗

Answer 1

这是经过一段时间的研究和编码的结果，希望对您有所帮助:)

对于其他人:我更改了 <div>至 <span>与提问者确认是否可以后。

var newString = "";

document.body.onkeyup = function(e) {
  newString += String.fromCharCode(e.keyCode);
  if (e.keyCode == 32) {
    var parent = document.getElementById("parent");
    var targetelement = parent.childNodes[parent.childNodes.length - 1];
    var div = document.createElement("SPAN");
    div.className = "root";
    div.id = parseInt(document.getElementsByClassName("root")[document.getElementsByClassName("root").length - 1].id) + 1;
    div.contenteditable = false;
    div.innerHTML = " ";
    var beforeelement = parent.childNodes[parent.childNodes.length - 1];
    beforeelement.innerHTML = beforeelement.innerHTML.substring(0, 1) + beforeelement.innerHTML.substring(1).replace(' ', '');
    document.getElementById("parent").appendChild(div);
    console.log("appended!");


    var selectionrange = document.createRange();
    var selection = window.getSelection();
    selectionrange.setStart(targetelement, 1);
    selectionrange.collapse(true);
    selection.removeAllRanges();
    selection.addRange(selectionrange);
  }
}

#parent>div {
  border-color: yellow;
  float: left;
}

.root {
  padding-right: 1px;
}

<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <span class="root" id="1">Que</span>
  <span class="root" id="2">word</span>
  <span class="root" id="3">Lorem</span>
  <span class="root" id="4">Ipsum</span>
  <span class="root" id="5"></span>
</div>