【HarmonyOS NEXT应用开发】案例39：基于ArkUI的验证码实现

已于 2024-08-16 11:02:12 修改
阅读量44 收藏
点赞数
分类专栏： HarmonyOS鸿蒙系统应用开发高级课程（100集） 文章标签： 华为 harmonyos 华为云 华为od macos
于 2024-08-16 11:00:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzs51job/article/details/141254099
版权

场景描述

场景一：基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。

场景二：基于系统键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，验证码的输入框带选中效果。

方案描述

场景一：

基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。

方案

  1. 每个验证码都是通过text实现的，而不是textInput。
  2. 在页面中写一个textInput将其隐藏，通过sendEventByKey方法将textInput的点击事件转移给text，同时给textInput绑定自定义键盘，这样点击text即可拉起自定义键盘。
  3. 将输入框的值赋值给text，通过text将其展示出来。

核心代码

1.写一个TextInput将其隐藏，给TextInput设置id后，在Text的点击事件中通过sendEventByKey方法将Tex

了解本专栏 订阅专栏 解锁全文 超级会员免费看
青少年编程作品集
关注
专栏目录
订阅专栏
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5282
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
基于HarmonyOS NEXT开发智能提醒助手
热门推荐
软贱开发攻城狮
06-30 1万+
随着智能设备的普及和物联网技术的飞速发展，人们对于智能化、个性化服务的需求日益增加，智能设备已经深入到我们生活的方方面面。在这个智能化的时代，一款能够实时、精准地提供信息提醒的智能助手，在内卷严重的当下，对于提升个人工作效率、优化生活质量显得尤为重要，这样的背景下，智能提醒助手应运而生，成为了人们生活中不可或缺的一部分。智能提醒助手不仅可以帮助用户管理时间、提醒重要事项，还能根据用户的习惯和需求提供个性化的服务。
基于ArkUI的验证码实现
hongxiaomeng的博客
06-07 361
HarmonyOS一杯冰美式的时间 -- 验证码框
maniuT的博客
02-16 1220
像是短密码、验证码都有可能需要一个输入框，像是如下：恰好在写HarmonyOS的时候也需要写一个验证码输入框，但是在实现的时候碰了几次灰，觉得有必要分享下，故有了此篇文章。🙏 PS：二三为错误示例，如果你只想要代码，在四开始只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）
鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码
2401_84182758的博客
04-16 844
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）以下就是该例子代码啦：@Preview@Componentbuild() {Stack() {= null) {Text(item)})
HarmonyOS NEXT应用开发—验证码布局
1
03-15 761
本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。
鸿蒙ArkTS自定义图形验证码组件
zcczero的博客
03-26 983
本文介绍ArkTS中利用Canvas绘制图形验证码，实现点击刷新验证码功能
HarmonyOS NEXT应用开发性能指导
最新发布
09-04
HarmonyOS NEXT应用开发性能指导。应用开发案例集
HarmonyOS NEXT应用开发之PersistentStorage：持久化存储UI状态
1
04-03 1994
PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用程序通过API，以决定哪些AppStorage属性应借助PersistentStorage持久化。UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会自动同步到PersistentStorage。PersistentStorage和AppStorage中的属性建立双向同步。
HarmonyOS Next应用开发案例大全-(持续更新中……)
2401_84181911的博客
04-11 1192
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙开发5.0【基于ArkUI的验证码】实现
2301_76813281的博客
08-19 837
场景一：基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。
20年老程序员谈谈：鸿蒙开发会成为下一个java吗？_鸿蒙程序员怎么样(1)
2401_84150320的博客
04-15 1110
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。而鸿蒙开发也是一个这样的新风口。互联网大厂都是行业的领头羊和先行者，鸿蒙系统无疑将成为一个新的发展趋势，现在成为第一波投入学习成本的人将获得时间优势，在鸿蒙系统开发在市场广泛流行之前掌握先机，自然有更大的机会进入大厂工作!
鸿蒙HarmonyOS应用开发-自定义实现验证码框_harmonyos 怎么实现一次输入一个数字的短信验证码
2401_84182073的博客
04-14 435
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）@Preview@Componentbuild() {Stack() {= null) {Text(item)})})})//TODO 系统问题，如果背景色是透明的也没用，非透明可以。
【最新鸿蒙应用开发】——使用axios完成手机号注册业务
m0_68038853的博客
06-04 602
校验图形验证码，校验通过根据 手机号 + 短信验证码 实现登录。
鸿蒙 验证码输入框
u011345545的专栏
12-16 362
Entry@Componenti++) {build() {Column(){}).width(0).height(0)i++) {} else {})@Componentbuild() {@Observed.width(50)
2024年鸿蒙最全鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码，2024年最新到了三面试成功率高吗
2401_84857523的博客
05-10 975
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）以下就是该例子代码啦：@Preview@Componentbuild() {Stack() {= null) {Text(item)})
鸿蒙HarmonyOS NEXT实战开发：Axios获取网络GBK数据转换UTF-8网络数据
wanghuaQAQ的博客
08-09 887
本示例介绍使用第三方库的Axios获取GBK格式的网络数据时..........
鸿蒙arkts api9 图片验证码 canvas
WYJAVAC的博客
07-01 390
/import RandomTxtCanvas from ''引用组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青少年编程作品集

你的赞赏将带来极佳的运气和才气

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值