文档管理中心
我的
|

ArkUI (方舟UI框架)

UI

HarmonyOS 5

HarmonyOS TextInput如何实现限制两位小数(API12+)

TextInput如何实现限制两位小数,不能以小数点开头的场景。

点赞
收藏
回复
1
分享
举报
浏览56 发布于2026-04-02 11:25未知归属地
全部评论
最多点赞
最新发布
最早发布

1、限制输入内容只能是两位小数,如在onChange中用正则判断输入内容是否符合要求,会导致光标有闪烁现象,这种场景需要在输入之前进行拦截。

2、在onChange中补齐0,如果直接输入.会在.之前补0。

3、在onWillInsert中判断如果已输入的字符包含.且将要输入的字符是. 或如已输入的内容满足两位小数条件,返回false不让输入,否则返回true。

收起
自动换行
深色代码主题
复制
TextInput({ text: this.textThree, placeholder: 'input your word...', controller: this.controllerThree })
  .type(InputType.NUMBER_DECIMAL)
  .onChange((value: string) => {
    // 当直接输入‘.’的时候自动补齐‘0.’,否则正常显示输入的字符
    if (value === '.') {
      this.textThree = '0.';
    } else {
      this.textThree = value;
    }
  })
    // 在返回true时,表示正常插入,返回false时,表示不插入
  .onWillInsert((info: InsertValue) => {
    // ^ 和 $ 分别指字符串的开始与结束,以数字开始,以小数点+两位数字结束
    let reg = /^\d+\.\d{2}$/
    // 如果输入的文本包含'.',且将要输入的字符是'.' 或者输入框的内容已经满足两位小数,返回false不让输入
    if (this.textThree.includes('.') && info.insertValue === '.' || reg.test(this.textThree)) {
      return false
    }
    return true
  })
1楼回复于2026-04-02 11:25 未知归属地
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
  • 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容,请注明内容来源。

我要提问题

了解社区公约,与您携手共创和谐专业的开发者社区。