TextInput如何取消默认聚焦效果

TextInput如何取消默认聚焦效果

HarmonyOS
2024-02-20 09:51:05
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
易安安安

页面中需要有承接焦点的组件,如果没有其他组件,组件中的TextInput就会聚焦;可以将焦点转移实现取消TextInput获取焦点的效果。

因为根据是否存在默认交互逻辑,可将组件分为可获焦和不可获焦组件,所以将焦点转移的时候有两种方案:

  • 方案一:存在默认交互逻辑的组件(默认可获焦):Button、TextInput等,只需通过将defaultFocus属性设置为true即可获取焦点。

示例代码

@Entry 
@Component  
struct Index { 
   controller: TextInputController = new TextInputController() 
  
   build() { 
     Row() { 
       TextInput({ 
         placeholder: 'wait input...', 
         text: '', 
         controller: this.controller 
       }) 
       Button('placeholder') 
         .defaultFocus(true) 
     } 
   } 
 }
  • 方案二:不存在默认交互逻辑的组件(默认不可获焦):Text、Image等,通过将focusable设置为true将此类组件转换为可获焦状态后再获取焦点。

示例代码

@Entry  
@Component 
struct Index { 
   controller: TextInputController = new TextInputController() 
   
   build() { 
     Row() { 
       TextInput({ 
         placeholder: 'wait input...', 
         text: '', 
         controller: this.controller 
       }) 
       Text('placeholder') 
         .focusable(true) 
         .defaultFocus(true) 
     } 
   } 
 }

参考链接

焦点控制

焦点事件

已于2024-2-21 18:27:58修改
分享
微博
QQ
微信
回复
2024-02-20 19:28:46
相关问题
HarmonyOS 如何取消TextInput自动聚焦
205浏览 • 1回复 待解决
HarmonyOS TextInput 取消默认焦点
320浏览 • 1回复 待解决
如何取消Button默认的按压效果?
379浏览 • 1回复 待解决
Textinput是否支持自动聚焦
76浏览 • 1回复 待解决
TextInput如何取消自动获得焦点
358浏览 • 1回复 待解决
TextInput聚焦如何使光标回到起点
1669浏览 • 1回复 待解决
TextInput聚焦如何让光标回到起点
2036浏览 • 3回复 待解决
HarmonyOS TextInput无法取消焦点
112浏览 • 1回复 待解决
HarmonyOS Tabs如何取消弹簧效果
181浏览 • 1回复 待解决
取消点击textinput时的背景高亮样式
334浏览 • 1回复 待解决
HarmonyOS 怎么取消 Text的默认内边距
239浏览 • 1回复 待解决
TextInput是否能自定义hover效果
1985浏览 • 1回复 待解决