如何控制TextInput软键盘的拉起与收起(获焦失焦)

如何控制TextInput软键盘的拉起与收起(获焦失焦)

HarmonyOS
2024-06-11 23:11:15
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
richard_li_li

控制TextInput组件使用时,软键盘的拉起,收起。

方案与实例:

1.通过让TextInput失焦的方法,让软键盘收起,目前让TextInput失焦的方法只能通过让别的组件获焦而使当前组件失焦,可以将焦点转移给其他组件

例如,提供一个button组件,并设置点击时可获焦,当点击按钮时,可让TextInput失焦,软键盘收起。

2.使用focusContrl.requestFocus接口使指定组件获取焦点。

示例代码:

1. 焦点转移

@Entry 
@Component 
struct TextInputExample { 
  @State oneButtonColor: string = '#FFC0CB' 
 
  build() { 
    Column() { 
      TextInput({ placeholder: '' }) 
        .width('95%') 
        .height(40) 
        .margin(20) 
        .onFocus(() => { 
          console.log("input获焦"); 
        }) 
        .onBlur(() => { 
          console.log("input失焦"); 
        }) 
      // button设置点击时能获焦 
      Button('First Button') 
        .backgroundColor(this.oneButtonColor) 
        .width(260) 
        .height(70) 
        .fontColor(Color.Black) 
        .focusable(true) 
          // 设置点击获取焦点 
        .focusOnTouch(true) 
        .onFocus(() => { 
          this.oneButtonColor = '#FF0000' 
        }) 
        .onBlur(() => { 
          this.oneButtonColor = '#FFC0CB' 
        }) 
    }.width('100%') 
 
  } 
}

2. focusControl.requestFocus

import promptAction from '@ohos.promptAction'; 
 
@Entry 
@Component 
struct RequestFocusExample { 
  @State idList: string[] = ['A', 'B', 'LastPageId'] 
  @State selectId: string = 'LastPageId' 
 
  build() { 
    Column({ space:20 }){ 
      Row({space: 5}) { 
        Button("id: " + this.idList[0] + " focusable(false)") 
          .width(200).height(70).fontColor(Color.White) 
          .key(this.idList[0]) 
          .focusable(false) 
          .onFocus(() => { 
            console.info(this.idList[0] + '获焦') 
          }) 
          .onBlur(() => { 
            console.info(this.idList[0] + '失焦') 
          }) 
        Button("id: " + this.idList[1]) 
          .width(200).height(70).fontColor(Color.White) 
          .key(this.idList[1]) 
          .onFocus(() => { 
            console.info(this.idList[1] + '获焦') 
          }) 
          .onBlur(() => { 
            console.info(this.idList[1] + '失焦') 
          }) 
      } 
      Row({space: 5}) { 
        Select([{value: this.idList[0]}, 
          {value: this.idList[1]}, 
          {value: this.idList[2]}]) 
          .value(this.selectId) 
          .onSelect((index: number) => { 
            this.selectId = this.idList[index] 
          }) 
        Button("RequestFocus") 
          .width(200).height(70).fontColor(Color.White) 
          .onClick(() => { 
            let res = focusControl.requestFocus(this.selectId)      // 使选中的this.selectId的组件获焦 
            if (res) { 
              promptAction.showToast({message: 'Request success'}) 
            } else { 
              promptAction.showToast({message: 'Request failed'}) 
            } 
          }) 
      } 
    }.width('100%').margin({ top:20 }) 
  } 
}

其他说明:

1.同一界面有多个TextInput时,可以将目标的Textinput设置为defaultFocus,就会默认获焦。

2.使用enableKeyboardOnFocus(value: boolean)设置TextInput通过点击以外的方式获焦时,是否绑定输入法时。如果设置值为false(默认值为true),focusControl.requestFocus只能获焦,不能拉起软键盘。

参考链接:

TextInput焦点事件

分享
微博
QQ
微信
回复
2024-06-12 23:09:53
相关问题
H5页面输入框自动弹起软键盘
522浏览 • 1回复 待解决
应用通用及走方式如何实现
595浏览 • 1回复 待解决
如何控制软键盘弹出对页面的遮挡?
1496浏览 • 1回复 待解决
如何主动拉起软键盘,你知道吗?
967浏览 • 1回复 待解决
如何判断软键盘是否弹出
764浏览 • 1回复 待解决
关于软键盘弹出遮挡问题
419浏览 • 1回复 待解决
如何实现弹窗和软键盘避让
592浏览 • 1回复 待解决
API8 怎么隐藏软键盘
1402浏览 • 1回复 待解决
软键盘弹出时,页面的自适应
471浏览 • 1回复 待解决
鸿蒙软键盘弹出后,页面底部按钮
2953浏览 • 0回复 待解决
如何屏蔽方向键走事件
792浏览 • 1回复 待解决