在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`;
});