Flutter实现TextField中选中文本的局部颜色修改

首先要明确：原生的<input>或<textarea>是纯文本控件，无法单独设置部分文本的颜色。要实现这个功能，你需要使用富文本编辑容器（比如设置contenteditable="true"的<div>），或者借助第三方富文本组件。下面提供两种常见场景的实现方案：

原生JavaScript + contenteditable容器 #

实现步骤： #

• 创建可编辑div作为文本输入区域
• 添加颜色按钮，点击时修改选中文本的颜色

基础代码示例： #

<!-- 可编辑文本区域 -->
<div id="textEditor" contenteditable="true" style="border:1px solid #ccc; padding:8px; min-height:100px;"></div>

<!-- 颜色控制按钮 -->
<button onclick="changeSelectedColor('#ff0000')">红色</button>
<button onclick="changeSelectedColor('#00ff00')">绿色</button>
<button onclick="changeSelectedColor('#0000ff')">蓝色</button>

<script>
function changeSelectedColor(color) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  // 执行颜色设置命令（虽标记为废弃，但主流浏览器仍支持）
  document.execCommand('foreColor', false, color);

  // 恢复光标选中状态，避免设置后光标跳到末尾
  selection.removeAllRanges();
  selection.addRange(selection.getRangeAt(0));
}
</script>

标准替代方案（使用Range API）： #

如果不想依赖execCommand，可以手动通过DOM操作实现：

function changeSelectedColor(color) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.color = color;

  // 用带样式的span包裹选中内容
  range.surroundContents(span);

  // 重新选中修改后的内容
  const newRange = document.createRange();
  newRange.selectNodeContents(span);
  selection.removeAllRanges();
  selection.addRange(newRange);
}

React 项目中的实现 #

在React中，通过ref获取编辑器节点，结合Selection API处理选区：

import { useRef } from 'react';

function TextEditor() {
  const editorRef = useRef(null);

  const changeSelectedColor = (color) => {
    const editor = editorRef.current;
    const selection = window.getSelection();
    if (!selection.rangeCount || selection.anchorNode !== editor) return;

    const range = selection.getRangeAt(0);
    const span = document.createElement('span');
    span.style.color = color;

    range.surroundContents(span);

    // 恢复选中状态
    const newRange = document.createRange();
    newRange.selectNodeContents(span);
    selection.removeAllRanges();
    selection.addRange(newRange);
  };

  return (
    <div>
      <div
        ref={editorRef}
        contentEditable
        style={{ border: '1px solid #ccc', padding: '8px', minHeight: '100px' }}
      />
      <div style={{ marginTop: '10px' }}>
        <button onClick={() => changeSelectedColor('#ff0000')}>红色</button>
        <button onClick={() => changeSelectedColor('#00ff00')}>绿色</button>
        <button onClick={() => changeSelectedColor('#0000ff')}>蓝色</button>
      </div>
    </div>
  );
}

export default TextEditor;

关键注意点： #

1. 普通<input>/<textarea>无法实现部分文本样式，必须使用富文本容器
2. 若需持久化内容，可通过editorRef.current.innerHTML获取HTML格式的内容，保存后再渲染回容器
3. 复杂场景建议使用成熟富文本编辑器组件（如Quill、Slate），避免手动处理选区和样式的兼容性问题

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