span contenteditable="true" 编辑状态下 @input 修改的光标位置

在使用 `contenteditable="true"` 属性的 HTML 元素中，当用户在编辑状态下输入或修改内容时，光标位置的变化可以通过监听 `input` 事件来实现。在事件处理函数中，可以通过 `window.getSelection()` 方法获取到当前选择区域的信息，包括光标位置。具体实现方式如下：

const editable = document.querySelector('[contenteditable="true"]');

editable.addEventListener('input', function() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const startOffset = range.startOffset;
  const endOffset = range.endOffset;
  console.log(`Start offset: ${startOffset}, End offset: ${endOffset}`);
});

在上面的代码中，`editable` 是一个具有 `contenteditable="true"` 属性的 HTML 元素，比如一个 `<div>`。当用户在该元素中输入或修改内容时，`input` 事件被触发，事件处理函数中通过 `window.getSelection()` 方法获取当前选择区域的信息。然后，从获取到的 `Range` 对象中获取起始和结束的偏移量，即可得到光标位置的信息。