HarmonyOS TextInput自定义键盘

TextInput自定义键盘，怎么点击空白处关闭键盘和按键怎么支持长按功能？

HarmonyOS

zbw_apple

2024-10-18 10:23:22

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

在TextInput外加个Column，然后在点击事件里通过controller.stopEditing关闭，具体参考下方示例代码。另外按钮长按是指长按选中输入内容吗？默认长按选中会出现剪切、复制、粘贴的选项，可以通过onCopy、onCut、onPaste三个回调来处理，下方示例代码写了onCopy的用法。详细内容请参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textinput-V5

示例代码：

// xxx.ets  
@Entry  
@Component  
struct TextInputExample {  
  controller: TextInputController = new TextInputController()  
  @State inputValue: string = ""  
  @State text: string = ""  
  // 自定义键盘组件  
  @Builder CustomKeyboardBuilder() {  
    Column() {  
      Button('x').onClick(() => {  
        // 关闭自定义键盘  
        this.controller.stopEditing()  
      })  
      Grid() {  
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item:number|string) => {  
          GridItem() {  
            Button(item + "")  
              .width(110).onClick(() => {  
              this.inputValue += item  
            })  
          }  
        })  
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)  
    }.backgroundColor(Color.Gray)  
  }  
  build() {  
    Column() {  
      TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘  
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }).height('48vp')  
        .onCopy((value: string) => {  
          this.text = value  
        })  
      Text('复制的内容：'+this.text)  
    }  
    .width('100%')  
    .height('100%')  
    .onClick(()=>{  
      this.controller.stopEditing()  
    })  
  }  
}

如果是指长按自定义键盘上某个键，可以在键盘按钮上加长按手势事件LongPressGesture，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-longpressgesture-V5

以下代码在自定义键盘的X上加了长按事件，请参考：

// xxx.ets  
@Entry  
@Component  
struct TextInputExample {  
  controller: TextInputController = new TextInputController()  
  @State inputValue: string = ""  
  @State text: string = ""  
  @State count: number = 0  
  // 自定义键盘组件  
  @Builder  
  CustomKeyboardBuilder() {  
    Column() {  
      Button('x')  
        .gesture(  
          LongPressGesture({ repeat: true })// 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）  
            .onAction((event: GestureEvent) => {  
              if (event && event.repeat) {  
                this.count++  
                console.info('这是长按操作')  
              }  
            })// 长按动作一结束触发  
            .onActionEnd(() => {  
              this.count = 0  
            })  
        )  
      Grid() {  
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {  
          GridItem() {  
            Button(item + "")  
              .width(110).onClick(() => {  
              this.inputValue += item  
            })  
          }  
        })  
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)  
    }.backgroundColor(Color.Gray)  
  }  
  build() {  
    Column() {  
      TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘  
        .customKeyboard(this.CustomKeyboardBuilder())  
        .margin(10)  
        .border({ width: 1 })  
        .height('48vp')  
        .onCopy((value: string) => {  
          this.text = value  
        })  
      Text('复制的内容：' + this.text)  
      Text('长按触发次数：' + this.count.toString())  
    }  
    .width('100%')  
    .height('100%')  
    .onClick(() => {  
      this.controller.stopEditing()  
    })  
  }  
}

2024-10-18 18:20:10

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS TextInput自定义键盘

订阅鸿蒙技术特刊，精选内容抢先看