Question

我有一个ngOnChanges() { if (changes.messages) { let chng = changes.messages; let cur = chng.currentValue; let prev = chng.previousValue; if(cur && prev) { // lazy load case if (cur[0].id != prev[0].id) { this.lazyLoadHappened = true; } // new message if (cur[cur.length -1].id != prev[prev.length -1].id) { this.newMessageHappened = true; } } } } div，每当用户键入某个字符时，我需要在光标位置显示一个自定义元素。

为此，我需要知道每当发生这种情况时，光标（而不是鼠标-字母出来的垂直线）位于何处。我该怎么办？

Answer 1

如果我理解您的意思是正确的，则可能需要根据光标位置将一些div元素插入[contenteditable]元素中。

如果为true，则可以尝试以下方式：

function append(node) {
  var sel = window.getSelection();
  var range = sel.getRangeAt(0);
  range.deleteContents();
  range.insertNode(node);
}

add.addEventListener('click', function () {
  var node = document.createElement('div');
  node.innerText = 'foo';
  node.className = 'test';
  
  append(node);
});

[contenteditable] {
  border: 1px solid #ccc;
}

.test {
  color: #f00;
  display: inline-block;
}

<div contenteditable>Hello world!</div>
<button type="button" id="add">Append text</button>

在此示例中，您可以单击编辑器以设置光标位置，然后单击按钮以添加新的div标签。

您还可以使用这种方式通过检测字符来通过input或keypress或keydown ...事件附加一些div标签，例如： @＃

编辑内容可编辑div时如何计算光标的x，y坐标？

1 个答案: