Flutter Web中如何禁止文本框右键菜单的复制粘贴功能？

你之前设置的enableInteractiveSelection和toolbarOptions只能禁用Flutter自带的选择工具栏，管不了浏览器的原生右键菜单——这就是右键仍能复制粘贴的核心原因。要彻底禁用，得结合Flutter Web的JS互操作能力拦截浏览器原生事件。

给你个直接可用的实现方案：

1. 引入Flutter Web自带的dart:js包（无需额外安装）
2. 给目标TextFormField绑定GlobalKey，用来定位对应的DOM元素
3. 页面渲染完成后，给该DOM元素添加事件监听，阻止右键菜单、复制、粘贴的默认行为

完整代码示例：

import 'dart:js' as js;
import 'package:flutter/material.dart';

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

  @override
  State<NoCopyPasteField> createState() => _NoCopyPasteFieldState();
}

class _NoCopyPasteFieldState extends State<NoCopyPasteField> {
  final _fieldKey = GlobalKey<FormFieldState>();

  @override
  void initState() {
    super.initState();
    // 等待页面渲染完成后再操作DOM
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 定位到TextFormField对应的input元素
      final inputEl = js.context['document']?.querySelector('#${_fieldKey.currentState?.context.hashCode}');
      if (inputEl != null) {
        // 禁用右键菜单
        inputEl.addEventListener('contextmenu', (e) => e.preventDefault());
        // 阻止粘贴操作
        inputEl.addEventListener('paste', (e) => e.preventDefault());
        // 阻止复制操作
        inputEl.addEventListener('copy', (e) => e.preventDefault());
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      key: _fieldKey,
      enableInteractiveSelection: false,
      toolbarOptions: const ToolbarOptions(
        copy: false,
        cut: false,
        paste: false,
        selectAll: false,
      ),
      decoration: const InputDecoration(hintText: '无法复制粘贴的输入框'),
    );
  }
}

设置后，不管是右键菜单还是Ctrl+C/V快捷键，都无法在这个输入框内执行复制粘贴操作。如果有多个输入框需要配置，把这个逻辑封装成组件即可复用。

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