如何修改TextField中选中文本的颜色？

核心思路 #

要实现动态可编辑文本的选中文本变色，核心是监听文本选中状态变化，获取选中范围的索引，然后对该范围的文本应用差异化样式。以下分Flutter和Web（JavaScript）两种常见场景给出实现方案。

Flutter 实现方案 #

1. 依赖TextEditingController控制文本与选中状态 #

使用TextEditingController可以轻松获取文本的选中范围（起始/结束索引），并通过其value属性设置富文本样式。

2. 完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('选中文本变色')),
        body: const TextFieldSelectionColorDemo(),
      ),
    );
  }
}

class TextFieldSelectionColorDemo extends StatefulWidget {
  const TextFieldSelectionColorDemo({super.key});

  @override
  State<TextFieldSelectionColorDemo> createState() => _TextFieldSelectionColorDemoState();
}

class _TextFieldSelectionColorDemoState extends State<TextFieldSelectionColorDemo> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 监听选中状态变化
    _controller.addListener(_updateSelectedTextStyle);
  }

  void _updateSelectedTextStyle() {
    final selection = _controller.selection;
    // 仅当存在有效选中范围时应用样式
    if (selection.start != selection.end && selection.start >= 0 && selection.end <= _controller.text.length) {
      final styleMap = <TextRange, TextStyle>{
        selection: const TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
      };
      _controller.value = _controller.value.copyWith(styles: styleMap);
    } else {
      // 取消选中时清除样式
      _controller.value = _controller.value.copyWith(styles: null);
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        controller: _controller,
        decoration: const InputDecoration(
          hintText: '输入文本并选中任意部分',
          border: OutlineInputBorder(),
        ),
        maxLines: null,
      ),
    );
  }
}

关键说明 #

• 获取选中索引：通过_controller.selection.start和_controller.selection.end直接拿到选中范围的起始、结束索引。
• 样式应用：利用TextEditingValue.copyWith(styles: ...)为指定TextRange设置自定义样式，选中状态消失时清空样式即可恢复默认。

Web（JavaScript）实现方案 #

1. 监听选中事件并操作DOM #

通过监听selectionchange事件获取选中范围，使用DOM操作包裹选中文本并设置颜色样式。

2. 完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .selected-text {
      color: #ff4444;
      font-weight: bold;
    }
    #editable-input {
      width: 100%;
      min-height: 100px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div contenteditable="true" id="editable-input">输入文本并选中任意部分</div>

  <script>
    const editable = document.getElementById('editable-input');

    // 监听选中状态变化
    document.addEventListener('selectionchange', () => {
      const selection = window.getSelection();
      if (!selection.rangeCount) return;

      const range = selection.getRangeAt(0);
      // 获取选中索引（仅当元素是单个文本节点时准确，复杂DOM需额外处理）
      const startIndex = getCharacterIndex(editable, range.startContainer, range.startOffset);
      const endIndex = getCharacterIndex(editable, range.endContainer, range.endOffset);

      // 清除之前的高亮样式
      clearHighlight();

      // 仅当选中范围有效时应用样式
      if (startIndex !== endIndex) {
        const span = document.createElement('span');
        span.className = 'selected-text';
        try {
          // 包裹选中内容
          range.surroundContents(span);
        } catch (e) {
          // 处理跨节点选中的情况
          const fragment = range.extractContents();
          span.appendChild(fragment);
          range.insertNode(span);
        }
      }
    });

    // 计算字符在整个可编辑元素中的索引
    function getCharacterIndex(element, node, offset) {
      let index = 0;
      const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
      let currentNode;
      while (currentNode = treeWalker.nextNode()) {
        if (currentNode === node) {
          return index + offset;
        }
        index += currentNode.length;
      }
      return index;
    }

    // 清除所有高亮样式
    function clearHighlight() {
      const spans = editable.querySelectorAll('.selected-text');
      spans.forEach(span => {
        // 将span的子节点替换回原位置，移除span标签
        span.replaceWith(...span.childNodes);
      });
      // 合并相邻文本节点，避免DOM碎片化
      editable.normalize();
    }
  </script>
</body>
</html>

关键说明 #

• 获取选中索引：通过自定义getCharacterIndex函数遍历文本节点，计算选中位置在整个可编辑内容中的索引。
• 样式应用：用<span>标签包裹选中内容并添加样式，取消选中时移除所有<span>标签并合并文本节点。

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