TextInput组件获取焦点的几种场景

HarmonyOS

liqi399

2024-03-17 14:32:26

浏览

回答 1

待解决

回答 1

按赞同

按时间

OwenOO

场景一：TextInput主动获取焦点。

调用focusControl.requestFocus接口可以主动让焦点转移至参数指定的组件上。可参考如下代码：

// xxx.ets 
@Entry 
@Component 
struct TextInputExample { 
  build() { 
    Row() { 
      Column() { 
        Button('第二个获取焦点') 
          .onClick(() => { 
            focusControl.requestFocus('BBB'); // 让第二个输入框获取焦点 
          }) 
 
        TextInput({ placeholder: 'Please enter the content.' }) 
          .showUnderline(true) 
          .width(380) 
          .height(60) 
          .key('AAA') 
 
        TextInput({ placeholder: 'Please enter the content.' }) 
          .showUnderline(true) 
          .width(380) 
          .height(60) 
          .key('BBB') 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

场景二：页面初次构建完成时，使第二个TextInputmoren默认获取焦点。

设置defaultFocus属性，defaultFocus可以使绑定的组件成为页面创建后首次获焦的焦点。可参考如下代码：

// xxx.ets 
@Entry 
@Component 
struct TextInputExample { 
  build() { 
    Row() { 
      Column() { 
        TextInput({ placeholder: 'Please enter the content.' }) 
          .showUnderline(true) 
          .width(380) 
          .height(60) 
 
        TextInput({ placeholder: 'Please enter the content.' }) 
          .showUnderline(true) 
          .defaultFocus(true) // 页面首次打开时，该TextInput获取焦点 
          .width(380) 
          .height(60) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

场景三：除点击TextInput获取焦点外，其它获取焦点的方式。

a. 方法1：defaultFocus可以使绑定的组件成为页面创建后首次获焦的焦点。

b. 方法2：groupDefaultFocus可以使绑定的组件成为tabIndex容器创建后首次获焦的焦点。

c. 方法3：focusOnTouch可以使绑定的组件点击后立即获焦。

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

设置enableKeyboardOnFocus(false)，在页面进入后不弹出键盘。可参考如下代码：

// xxx.ets 
@Entry 
@Component 
struct TextInputExample { 
  build() { 
    Row() { 
      Column() { 
        TextInput({ placeholder: 'Please enter the content.' }) 
          .defaultFocus(true) // 页面首次打开时，该TextInput获取焦点 
          .enableKeyboardOnFocus(false) // TextInput通过点击以外的方式获焦时，是否绑定输入法。 
          .placeholderColor(Color.Grey) 
          .placeholderFont({ size: 14, weight: 400 }) 
          .caretColor(Color.Blue) 
          .width('95%') 
          .height(40) 
          .margin(20) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

场景五：页面初次构建完成时，使TextInput不获取焦点且不弹出键盘。

TextInput默认不获取焦点，不弹出键盘。可参考如下代码：

// xxx.ets 
@Entry 
@Component 
struct TextInputExample { 
  build() { 
    Column() { 
      TextInput({ placeholder: 'Please enter the content.' }) 
    } 
    .width('100%') 
  } 
}

2024-03-18 17:18:15

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

发布

51CTO

51CTO博客

51CTO学堂

TextInput组件获取焦点的几种场景

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