在Textarea中的光标位置显示DIV

在Textarea中的光标位置显示DIV是一种在文本编辑器中的特殊需求，通常用于实现自定义的输入提示或者自动补全功能。要实现这个功能，需要使用JavaScript和CSS来完成。

以下是一个简单的示例代码，可以在Textarea中的光标位置显示一个DIV：

const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  const cursorPosition = textarea.selectionStart;
  const textBeforeCursor = textarea.value.substring(0, cursorPosition);
  const textAfterCursor = textarea.value.substring(cursorPosition);
  const div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.top = '0';
  div.style.left = '0';
  div.style.backgroundColor = 'white';
  div.style.border = '1px solid black';
  div.style.padding = '5px';
  div.textContent = 'Hello, world!';
  textarea.parentNode.insertBefore(div, textarea.nextSibling);
  const rect = textarea.getBoundingClientRect();
  const cursorRect = textarea.getBoundingClientRect();
  div.style.top = `${cursorRect.top - rect.top}px`;
  div.style.left = `${cursorRect.left - rect.left}px`;
});

这段代码首先获取Textarea元素，并在其上添加一个input事件监听器。当用户在Textarea中输入时，会触发这个事件。在事件处理程序中，我们获取光标的位置，并使用substring方法将文本分成两部分：光标前的文本和光标后的文本。然后，我们创建一个DIV元素，并设置其样式和文本内容。最后，我们将这个DIV元素插入到Textarea元素的下一个兄弟节点中，并使用getBoundingClientRect方法计算光标的位置，以便将DIV元素放置在正确的位置。

需要注意的是，这只是一个简单的示例代码，实际应用中可能需要更复杂的逻辑来实现更复杂的功能。例如，可以使用第三方库来实现更高级的自动补全功能，或者使用Web Worker来实现更高效的文本处理。