HarmonyOS鸿蒙Next中如何屏蔽或者重写TextInput的文本选择菜单的复制、粘贴功能？

开发者您好，

TextInput、TextArea等文本输入组件，在长按时会自动弹起系统文本选择菜单；

如果想要隐藏系统文本选择菜单，可以使用selectionMenuHidden属性进行隐藏。

如果不想隐藏系统文本选择菜单，而是仅仅想禁止粘贴，有以下两种方法：

• 重写onPaste方法，在触发粘贴事件回调时不让文本粘贴。
• 使用editMenuOptions设置自定义菜单的扩展项，禁用editMenu的粘贴项。

使用自定义菜单bindContextMenu替代系统文本选择菜单，isShown为false时，隐藏菜单。弹出菜单项需要自定义。

推荐解决方案：

方案一：利用selectionMenuHidden属性隐藏系统文本选择菜单，示例代码如下：

@Entry
@Component
struct Index {
  @State message: string = '';

  build() {
    Column() {
      Text(`输入的内容: ${this.message}`).margin({ top: 100, bottom: 30 })
      TextInput({ placeholder: "请输入内容" })
        .borderRadius(0)
        .onChange((value: string) => {
          this.message = value
        })
        .selectionMenuHidden(true)
    }
    .height('100%')
    .width('100%')
  }
}

方案二：在TextInput的onPaste回调事件中阻止文本的粘贴，示例代码如下：

@Entry
@Component
struct Index {
  @State message: string = '';

  build() {
    Column() {
      Text(`输入的内容: ${this.message}`).margin({ top: 100, bottom: 30 })
      TextInput({ placeholder: "请输入内容" })
        .borderRadius(0)
        .onChange((value: string) => {
          this.message = value
        })
        .onPaste((value: string, event: PasteEvent) => {
          if (event !== undefined && event.preventDefault) {
            console.info("禁止粘贴")
            event.preventDefault()
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

方案三：禁用editMenu的粘贴项。

• 定义onCreateMenu方法，使用filter函数切除Array<TextMenuItem>中的粘贴项。
• 在editMenuOptions属性中使用onCreateMenu方法初始化editMenu。

示例代码如下：

@Entry
@Component
struct TextAreaExample {
  @State text: string = 'TextArea editMenuOptions'

  onCreateMenu(menuItems: Array<TextMenuItem>) {
    menuItems = menuItems.filter(item => item.content !== '粘贴');
    return menuItems
  }

  build() {
    Column() {
      TextArea({ text: this.text })
        .width('95%')
        .height(56)
        .editMenuOptions({
          onCreateMenu: this.onCreateMenu, onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {
            return false;
          }
        })
        .margin({ top: 100 })
    }
    .width("90%")
    .margin("5%")
  }
}

方案四：拦截整个默认菜单并使用自定义bindContextMenu代替。

• 令Array<TextMenuItem>返回空数组，从而拦截整个editMenu。
• 定义bindContextMenu，实际内容和功能需要自定义。

示例代码如下：

@Entry
@Component
struct Example {
  @State start: number = 0
  @State end: number = 0
  @State text: string = '请选择此文字'
  @State isShown: boolean = true

  getContentLength() {
    return this.text.length
  }

  setSelection(start: number, end: number) {
    this.start = start
    this.end = end
  }

  setAllSelect() {
    this.setSelection(0, this.getContentLength())
  }

  build() {
    Column() {
      Column() {
        TextArea({ text: this.text })
          .fontSize(16)
          .copyOption(CopyOptions.InApp)
          .bindContextMenu(this.isShown, SelectionMenu,
            {
              onDisappear: () => {
                this.isShown = false;
              }
            })
          .editMenuOptions({
            onCreateMenu: (menuItems: Array<TextMenuItem>) => {
              console.log(`Text onCreateMenu ----------------------`)
              this.isShown = true
              return [] // 拦截默认菜单项，显示自定义contextmenu
            }, onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {
              return true;
            }
          })
          .onTextSelectionChange((start, end) => {
            console.info('TextSelection' + start.toString() + '-' + end.toString())
            if (start < 0 || end < 0) {
              this.setSelection(0, 0)
              this.isShown = false;
            } else {
              this.start = start
              this.end = end
            }
          })
          .parallelGesture(
            LongPressGesture()
              .onAction((event: GestureEvent) => {
                this.setAllSelect()
              })
          )
      }
      .padding(50)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Pink)
      .parallelGesture(
        LongPressGesture()
          .onAction((event: GestureEvent) => {
            this.setAllSelect()
          })
      )
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

@Builder
function SelectionMenu() {
  Column() {
    Text('CustomMenu')
  }
}