contentEditable onChange事件如何逐字符获取输入内容？

当然可行，以下几种方法可以帮你实现逐字符获取输入内容，而不是每次返回全部文本：

1. 使用beforeinput事件 #

这是最可靠的方案，它会在内容实际变更前触发，事件对象的data属性直接包含即将插入的单个字符（输入"fun"时会依次返回"f"、"u"、"n"）。示例代码：

<ContentEditable
  html={yourContent}
  onBeforeInput={(e) => {
    const insertedChar = e.data;
    if (insertedChar) {
      // 处理单个插入的字符
      console.log("输入的字符：", insertedChar);
    }
  }}
  onChange={/* 保留原有逻辑 */}
/>

注意：如果是删除操作，e.data会是null，可以通过e.inputType判断操作类型（比如deleteContentBackward对应退格操作）。

2. 对比onChange前后的内容差异 #

如果必须依赖onChange，可以通过缓存上一次的内容，和当前内容对比来提取新增的字符：

const [content, setContent] = useState('');
let prevContent = useRef('');

const handleChange = (e) => {
  const currentContent = e.target.innerHTML; // 或组件返回的html内容
  const diff = currentContent.replace(prevContent.current, '');
  if (diff) {
    console.log("新增字符：", diff);
  }
  prevContent.current = currentContent;
  setContent(currentContent);
};

<ContentEditable html={content} onChange={handleChange} />

这种方法需要额外处理换行、粘贴等批量内容插入的场景，区分是单个字符还是多字符输入。

3. 结合keyup事件（需谨慎使用） #

keyup事件触发时字符已经插入DOM，但它的局限性很大：无法识别输入法输入的字符（比如中文输入法连续输入时，keyup只会触发最后一次），也无法处理鼠标粘贴、拖拽等非键盘输入场景。示例：

<ContentEditable
  html={yourContent}
  onKeyUp={(e) => {
    const char = String.fromCharCode(e.keyCode);
    // 仅适用于英文单字符输入，不适用于输入法或特殊键
    console.log("输入字符：", char);
  }}
/>

总结：优先使用beforeinput事件，它能覆盖绝大多数输入场景，准确获取单个插入字符；如果需要兼容旧浏览器，再考虑内容对比的方案。

内容的提问来源于stack exchange，提问作者Pradeep Banavara