使用react-contenteditable为输入框设置字符限制失效问题

问题根源 #

你遇到的问题核心在于：react-contenteditable 的 value 是HTML字符串，不是纯文本。直接对HTML字符串用 slice 或 substring 会截断标签结构，导致：

• 多余字符无法被正确过滤（HTML标签会占用长度，但实际显示的文本长度并未达到限制）
• 截断后HTML结构损坏，出现 & 这类未闭合的实体编码（比如空格被转成  ，截断后只剩 &）
• 频繁状态更新与输入框原生行为冲突，引发卡顿

解决方案 #

下面是修正后的代码，核心思路是先将HTML转为纯文本计算实际输入长度，再基于纯文本限制后还原成可编辑的HTML，同时处理光标位置避免跳转：

import React from "react";
import ReactDOM from "react-dom";
import ContentEditable from "react-contenteditable";
import "./styles.css";

class MyComponent extends React.Component {
  constructor() {
    super();
    this.contentEditable = React.createRef();
    this.state = { html: "<b>Hello <i>World</i></b>" };
  }

  handleChange = (evt) => {
    // 1. 将HTML转为纯文本，计算实际显示的字符长度
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = evt.target.value;
    const plainText = tempDiv.textContent || tempDiv.innerText || "";

    if (plainText.length > 50) {
      // 2. 截取纯文本到50字符
      const trimmedText = plainText.slice(0, 50);
      // 3. 将截取后的纯文本转为HTML（如需保留原有格式，可做更复杂的标签保留处理）
      this.setState({ html: trimmedText });

      // 4. 修复光标位置，避免跳到开头
      setTimeout(() => {
        const element = this.contentEditable.current;
        if (element) {
          const range = document.createRange();
          const selection = window.getSelection();
          range.selectNodeContents(element);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      }, 0);
    } else {
      // 长度未超，正常更新
      this.setState({ html: evt.target.value });
    }
  };

  render = () => {
    return (
      <ContentEditable
        innerRef={this.contentEditable}
        html={this.state.html}
        disabled={false}
        onChange={this.handleChange}
      />
    );
  };
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);

关键细节说明 #

• HTML转纯文本：用临时div解析HTML，获取真实显示的文本内容，确保计算的长度是用户实际输入的字符数，不受HTML标签干扰。
• 避免HTML截断：如果需要保留原有格式（如加粗、斜体），不能直接截断HTML字符串，需遍历DOM节点截取文本并保留标签结构（可借助DOMParser实现更精细的处理）。
• 光标修复：状态更新会重新渲染输入框，光标默认跳转到开头，用setTimeout在DOM更新后重置光标到末尾，提升用户体验。

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