HarmonyOS开发,TextInput组件获取焦点的案例及代码实现

以下是针对鸿蒙开发中你所提出的四种场景分别实现相应效果的代码示例:

环境准备

确保你已经安装了 DevEco Studio 并且配置好了 HarmonyOS SDK 开发环境。

代码实现

import { FocusController } from '@ohos.arkui.UIContext';

@Entry
@Component
struct FocusExample {
  private inputFocusControl: FocusController = new FocusController();

  build() {
    Column({ space: 50 }) {
      // 场景一:TextInput主动获取焦点
      Column({ space: 10 }) {
        Text('场景一:TextInput主动获取焦点')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第一个输入框' })
          .width('90%')
          .focusable(true)
          .key("ABC")


        Button('让第一个输入框获取焦点')
          .width('90%')
          .onClick(() => {
            this.inputFocusControl.requestFocus("ABC");
          })
      }

      // 场景二:页面初次构建完成时,使第二个TextInput获取默认焦点
      Column({ space: 10 }) {
        Text('场景二:页面初次构建完成时,使第二个TextInput获取默认焦点')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第二个输入框' })
          .defaultFocus(true)// 页面首次打开时,该TextInput获取焦点
          .width('90%')
          .focusable(true)
      }

      // 场景三:页面初次构建完成时,使TextInput获取焦点且不弹出键盘
      Column({ space: 10 }) {
        Text('场景三:页面初次构建完成时,使TextInput获取焦点且不弹出键盘')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第三个输入框' })
          .defaultFocus(true)// 页面首次打开时,该TextInput获取焦点
          .enableKeyboardOnFocus(false)// TextInput通过点击以外的方式获焦时,是否绑定输入法。
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .caretColor(Color.Blue)
          .width('90%')
      }

      // 场景四:页面初次构建完成时,使TextInput不获取焦点且不弹出键盘
      Column({ space: 10 }) {
        Text('场景四:页面初次构建完成时,使TextInput不获取焦点且不弹出键盘')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第四个输入框' })
          .width('90%')
      }
    }
    .width('100%')
    .padding({ top: 50 })
  }
}

代码解释

场景一:TextInput主动获取焦点

  • 点击按钮时,调用 requestFocus 方法可以主动让焦点转移至参数指定的组件上。

场景二:页面初次构建完成时,使第二个TextInput获取默认焦点

  • TextInput 组件中设置 defaultFocus: true,这样页面创建后该输入框会自动获取焦点。

场景三:页面初次构建完成时,使TextInput获取焦点且不弹出键盘

  • 设置 defaultFocus: true 使输入框在页面创建后获取焦点。
  • 调用 enableKeyboardOnFocus(false) 方法,确保输入框获取焦点时不弹出键盘。

场景四:页面初次构建完成时,使TextInput不获取焦点且不弹出键盘

  • TextInput 组件默认不会获取焦点,也不会弹出键盘,所以不需要额外设置。

运行项目

将上述代码复制到 DevEco Studio 中,点击运行按钮,选择合适的模拟器或真机设备,即可看到四种场景的效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容