文本输入框设置手机号码格式输入——如何解决修改数据后光标位置错乱的问题?

发布日期:2026-04-30 10:02:10   浏览量 :1
发布日期:2026-04-30 10:02:10  
1

2026西湖龙井茶官网DTC发售:茶农直供,政府溯源防伪到农户家 

阅读原创文章:TextInput 设置手机号码格式输入 - 如何解决修改数据后光标位置错乱的问题?

问题描述

使用鸿蒙系统 TextInput 通过 onChange() 输入格式为 3-4-4 的电话号码,在实际应用中会导致两个问题:

  • 空格可以被删除。
  • 在删除或插入时,光标会跳转到末尾。

当前效果

image.png

对于号码 123 4567 8910,7 和 8 之间的空格被移除。TextInput 中的空格首先被删除,随后值刷新,显示为:123 4567 8910,光标位于末尾。

image.png

预期结果:

image.png

对于号码 123 4567 8910,7 和 8 之间的空格被移除,实际上删除了数字 7,导致显示为:123 4568 910,光标位于数字 6 之后。

image.png

删除数字 6,显示 123 4578 910,光标位于数字 5 之后。

背景知识

  • TextInput 是一个单行文本输入组件。当输入内容发生变化时,会触发该组件的 onChange 回调函数。当输入完成时,会触发 onDidInsert 回调函数。当删除完成时,会触发 onDidDelete 回调函数。
  • RichEditor 是一个支持图文混合布局以及交互式文本编辑的组件。

排查过程

  1. 观察到在 onChange 中进行格式化需要重新赋值(以重新应

    免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。

关于我们
热门推荐
合作伙伴
免责声明:本站部分资讯来源于网络,如有侵权请及时联系客服,我们将尽快处理
支持 反馈 订阅 数据
回到顶部