TextInput组件输入状态下隐藏光标

输入框输入数字验证码进行校验的场景中,如果使用TextInput单行文本输入框作为验证码的输入框,当点击TextInput调起输入法会有蓝色的光标,现在想要完全隐藏掉光标(包括下面“圆圈”手柄)。

TextInput组件输入状态下隐藏光标-鸿蒙开发者社区

HarmonyOS
2024-05-26 12:02:35
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
liqi399

使用的核心API

Stack容器

核心代码解释

使用Stack容器包含TextInput和Text子组件,将TextInput设置为透明状态隐藏,具体要显示的文本反馈在Text上面。

@Entry 
@Component 
struct Index { 
  @State text: string = '' 
  controller: TextInputController = new TextInputController() 
  build() { 
    Column() { 
      Stack() { 
        TextInput({ text: this.text, controller: this.controller }) 
          .opacity(0) // 设置输入框透明度为0,隐藏光标 
          .width(200) 
          .height(60) 
          .margin(10) 
          .type(InputType.Number) 
          .onChange((value: string) => { 
            this.text = value 
          }) 
        Text(this.text).margin(10) //具体要显示的文本反馈在Text上面 
      } 
  
      Button('clear') 
        .onClick(() => { 
          this.text = '' 
        }) 
    }.width('100%') 
  } 
}

适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 15:57:16
相关问题
何设置组件不同状态下的样式
646浏览 • 1回复 待解决
如何设置组件不同状态下的样式
759浏览 • 1回复 待解决
TextInput怎么输入中文
1323浏览 • 0回复 待解决
如何获取UI组件的显示或隐藏状态
640浏览 • 1回复 待解决
熄屏状态下网络请求失败
545浏览 • 1回复 待解决
TextInput在聚焦时如何让光标回到起点
627浏览 • 1回复 待解决
TextInput在聚焦时如何使光标回到起点
606浏览 • 1回复 待解决
ets开发如何设置隐藏状态栏?
1839浏览 • 1回复 待解决
应用如何设置隐藏顶部的状态
891浏览 • 1回复 待解决
如何隐藏容器组件的溢出内容
910浏览 • 1回复 待解决
TextInput组件获取焦点的几种场景
798浏览 • 1回复 待解决