代码之家 › 专栏 › 技术社区 › x-rw

如何做到这一点:每次按下空格键后,创建一个新的SPAN元素并在其中插入符号?

javascript

x-rw · 技术社区 · 6 年前

如何将光标放在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

例子:

当我输入“嗨”并按空格键时,这应该是结果

2 回复 | 直到 6 年前

Sheshank S. 6 年前

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

对于其他人:我改变了 <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 = "&nbsp;";
    var beforeelement = parent.childNodes[parent.childNodes.length - 1];
    beforeelement.innerHTML = beforeelement.innerHTML.substring(0, 1) + beforeelement.innerHTML.substring(1).replace('&nbsp;', '');
    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>

ManavM 6 年前

好的,我假设你想移动插入符号(插入符号是表示你开始编辑文本的闪烁线),而不是鼠标指针(因为这是不可能的)。

这会将插入符号位置更改为文本中所需的位置:

element.setSelectionRange(pos, pos);

这是一个基于从所需的posistion中选择文本到基本上移动插入符号的相同位置的技巧。

更新:

好吧,以后再做些研究,看起来这只适用于 input 元素类型和 contentditable 田野的工作方式不同。不管怎样,这是一些我已经测试过的代码,可以在你的情况下使用

var parent = document.getElementById("parent");
var range = document.createRange();
var selection = window.getSelection();
var element = parent.childNodes[parent.childNodes.length - 1];
range.setStart(element, offset);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);