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

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

HarmonyOS
2024-03-17 14:32:26
浏览
收藏 0
回答 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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-03-18 17:18:15
相关问题
如何判断音频焦点获取和丢失?
4112浏览 • 1回复 待解决
如何获取组件属性信息
289浏览 • 1回复 待解决
TextInputonSubmit事件如何使用
271浏览 • 1回复 待解决
场景化控件中无法获取到定位信息
150浏览 • 1回复 待解决
ArkTs如何获取组件宽高?
2505浏览 • 1回复 待解决
TextInput怎么输入中文
867浏览 • 0回复 待解决
ArkTS获取组件位置和大小接口
770浏览 • 1回复 待解决
如何获取组件刷新时间
230浏览 • 1回复 待解决
如何获取Text组件中文字宽度
162浏览 • 1回复 待解决