【HarmonyOS】输入框焦点控制实现键盘显隐

【HarmonyOS】输入框焦点控制实现键盘显隐

问题背景:

鸿蒙中输入框控件,TextInput最常见的控制,即:针对输入框焦点控制,获取焦点,失去焦点。达到用户方便操作输入和退出输入。

因为输入框一定会伴随着键盘交互,一般在逻辑控制上和UI渲染上,都可能会需要动态调整改焦点。

解决方案:

1.首先调用此接口可以主动让焦点转移至参数指定的组件上:

focusControl.requestFocus("id");


注意:
支持焦点控制的组件:TextInput、TextArea、Search、Button、Text、Image、List、Grid。焦点事件当前仅支持在真机上显示运行效果。


2.监听监控自身的获取焦点回调和失去焦点回调:

onFocus

onBlur

3.点击控件时需要设置控件获取焦点

DEMO示例:

dart 复制代码
import { promptAction } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

/**
 * 焦点界面
 */
@Entry
@Component
struct FocusPage {

  private TAG: string = "FocusPage";

  private ID_TARGET_TEXT_INPUT: string = "ID_TARGET_TEXT_INPUT";

  // 是否能获焦,默认false
  @State isFocusable: boolean = true;

  private requestFocus(){
    focusControl.requestFocus(this.ID_TARGET_TEXT_INPUT);
  }

  private setFocus(){
    this.isFocusable = true;
    this.requestFocus();
  }

  onClickSetFocus = ()=>{
    this.setFocus();
  }

  onClickResetFocus = ()=>{
    // 禁用焦点,就可直接失去焦点
    this.isFocusable = false;
  }

  private showToast(content: string){
    try {
      promptAction.showToast({
        message: content,
        duration: 2000
      });
    } catch (error) {
      let message = (error as BusinessError).message
      let code = (error as BusinessError).code
      console.error(this.TAG, `showToast args error code is ${code}, message is ${message}`);
    };
  }

  build() {
    Column(){
      TextInput()
        .id(this.ID_TARGET_TEXT_INPUT)
        .size({
          width: px2vp(600),
          height: px2vp(200)
        })
        .focusable(this.isFocusable)
        // 获得焦点回调
        .onFocus(()=>{
          // do sth ..
          this.showToast("onFocus 获得焦点回调");
        })
        // 失去焦点回调
        .onBlur(()=>{
          // do sth ..
          this.showToast("onBlur 失去焦点回调");
        })
        .onClick(()=>{
          this.setFocus();
        })

      Row(){
        Button("click set focus")
          .size({
            width: px2vp(600),
            height: px2vp(200)
          })
          .margin({ top: px2vp(100) })
          .onClick(this.onClickSetFocus)

        Blank()

        Button("click reset focus")
          .size({
            width: px2vp(600),
            height: px2vp(200)
          })
          .margin({ top: px2vp(100) })
          .onClick(this.onClickResetFocus)
      }
      .size({
        width: "100%",
        height: px2vp(200),
      })
      .padding({ left: px2vp(20), right: px2vp(20) })
    }
    .justifyContent(FlexAlign.Center)
    .size({
      width: "100%",
      height: "100%"
    })
  }
}
相关推荐
Random_index4 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
芋芋qwq6 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室7 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu79 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩9 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
大霞上仙10 小时前
element ui table 每行不同状态
vue.js·ui·elementui
岳不谢11 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr057512 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
Industio_触觉智能13 小时前
如何在开源鸿蒙OpenHarmony开启SELinux模式?RK3566鸿蒙开发板演示
openharmony·selinux·开源鸿蒙·鸿蒙开发板·rk3566开发板
栈老师不回家18 小时前
Element UI 组件库详解【Vue】
前端·vue.js·ui