如何在React中为可编辑div实现maxLength字符长度限制功能

实现方案 #

原有方案仅监听keyPress事件，无法覆盖粘贴、拖拽插入、输入法输入等非键盘输入场景，可通过组合监听onPaste+onInput事件的方案实现全场景的长度限制，同时额外处理光标位置避免截断后光标跳转的体验问题，具体实现如下：

1. 粘贴事件提前拦截（避免插入后截断的闪烁问题）

const handlePaste = (e, maxLength = INPUT_MAX_LENGTH) => {
  e.preventDefault();
  // 读取剪贴板纯文本内容
  const pasteContent = e.clipboardData.getData('text/plain');
  const currentContent = e.target.textContent;
  const remainLength = maxLength - currentContent.length;
  // 剩余长度为0直接阻止粘贴
  if (remainLength <= 0) return;
  // 截取可插入的内容长度
  const insertContent = pasteContent.slice(0, remainLength);
  // 插入内容到光标位置
  document.execCommand('insertText', false, insertContent);
};

2. onInput事件兜底处理（覆盖所有内容修改场景）

const handleInput = (e, maxLength = INPUT_MAX_LENGTH) => {
  const fullContent = e.target.textContent;
  // 长度未超出直接更新状态
  if (fullContent.length <= maxLength) {
    handleGreetingChange(fullContent);
    return;
  }
  // 超出长度时截断内容
  const truncatedContent = fullContent.slice(0, maxLength);
  // 保存当前光标位置
  const selection = window.getSelection();
  const originRange = selection.getRangeAt(0);
  const cursorPos = originRange.startOffset;

  // 更新内容和状态
  e.target.textContent = truncatedContent;
  handleGreetingChange(truncatedContent);

  // 恢复光标位置，避免截断后光标跳转到开头
  const newRange = document.createRange();
  newRange.setStart(e.target.firstChild, Math.min(cursorPos, maxLength));
  newRange.collapse(true);
  selection.removeAllRanges();
  selection.addRange(newRange);
};

3. 优化原键盘输入拦截逻辑（避免功能键被误拦截）

const handlesInputMaxLength = (event, maxSize = INPUT_MAX_LENGTH) => {
  const currentText = event.target.textContent;
  // 放行退格、删除、快捷键等功能按键
  const isFunctionKey = event.key === 'Backspace' || event.key === 'Delete' || event.ctrlKey || event.metaKey;
  if (currentText.length >= maxSize && !isFunctionKey) {
    event.preventDefault();
    return false;
  }
};

4. 组件绑定调整

<span
  contentEditable={true}
  onKeyPress={(e) => handlesInputMaxLength(e, INPUT_MAX_LENGTH)}
  onPaste={(e) => handlePaste(e, INPUT_MAX_LENGTH)}
  onInput={handleInput}
  suppressContentEditableWarning={true} // 关闭React的受控contenteditable警告
>
  {greetingMessage}
</span>

注意事项 #

• 该方案覆盖了手动输入、粘贴、拖拽插入、输入法输入等所有修改可编辑元素内容的场景，限制逻辑无遗漏
• 光标恢复逻辑保证了截断后用户输入体验和原生maxlength基本一致
• 若需要兼容未来浏览器对document.execCommand的废弃，可将粘贴插入逻辑替换为Range API实现即可

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