标签: TextInput - 个人小站

2024-05-11发表几秒读完 (大约97个字)

DevEco Studio 版本：DevEco Studio NEXT Developer Preview2
HarmonyOS API 版本：4.1.0(11)

TextInput 清除按钮实现

自定义 TextInput，TextArea 组件，实现一键清空已输入内容的按钮。

具体代码如下：

@State input: string = '';
@Builder
SearchLayout() {
  Row() {
    TextInput({placeholder: 'inupt your text...',})
      .onChange((value) => {
        this.input = value
      })
      .layoutWeight(1)
    ImageView({
      option: {
        loadSrc: $r("app.media.clear"),
        width: 16,
        height: 16,
      }
    })
      .visibility(this.input == '' ? Visibility.None : Visibility.Visible)
      .onClick(() => {
        this.input = ''
      })
  }
}

参考

https://ost.51cto.com/answer/8395

2024-05-11发表1 分钟读完 (大约187个字)

鸿蒙-TextInput首次进入页面不弹键盘

DevEco Studio 版本：DevEco Studio NEXT Developer Preview2
HarmonyOS API 版本：4.1.0(11)

TextInput 首次进入页面不弹键盘

搜索结果页面的顶部有个 TextInput 输入框，导致一进入页面会自动拉起键盘。这是因为进入页面时，TextInput 会自动获得焦点。系统组件提供了defaultFocus()方法，用来手动控制是否默认获取焦点。

注意，单纯设置 TextInput 的defaultFocus(false)可能会不生效，需要当前页面中有主动承接默认焦点的控件才行。

具体代码如下：

Image($r("app.media.back"))
  .width(24)
  .height(24)
  .onClick(() => {})
  .focusable(true)
  .defaultFocus(true);

TextInput({
  placeholder: "搜索您想要的内容",
})
  .focusable(true)
  .focusOnTouch(true)
  .defaultFocus(false);

参考

https://blog.csdn.net/Mayism123/article/details/137349464

TextInput 清除按钮实现

参考

TextInput 首次进入页面不弹键盘

参考

标签

最新文章

归档

Your browser is out-of-date!