HarmonyOS鸿蒙Next中TextInput输入框正则匹配设置输入金额

HarmonyOS鸿蒙Next中TextInput输入框正则匹配设置输入金额 TextInput输入框正则匹配设置输入金额,需要现在输入位数位小数点后两位

2 回复 
TextInput({
  text: this.money, 
  placeholder: '请输入销售总价'
})
.fontSize(16)
.textAlign(TextAlign.End)
.backgroundColor(Color.White)
.type(InputType.NUMBER_DECIMAL)
.onWillInsert((info: InsertValue) => {
  let result = this.money + info.insertValue
  if (result.indexOf('.') != -1) {
    if (result.split('.')[1].length > 2) {
      return false
    }
  }
  return true
})
.onChange((value: string) => {
  this.money = value
})

解决了，使用onWillInsert方法

更多关于HarmonyOS鸿蒙Next中TextInput输入框正则匹配设置输入金额的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以使用TextInput组件来实现输入框的正则匹配功能。为了设置输入金额的正则匹配，可以通过onChange事件监听输入内容的变化，并使用正则表达式来验证输入是否符合金额格式。

以下是一个示例代码片段，展示了如何在TextInput中设置输入金额的正则匹配：

@Entry
@Component
struct AmountInput {
  @State private amount: string = '';

  build() {
    TextInput({ placeholder: '请输入金额' })
      .onChange((value: string) => {
        // 正则表达式匹配金额格式（允许小数点后两位）
        const regex = /^\d+(\.\d{0,2})?$/;
        if (regex.test(value) || value === '') {
          this.amount = value;
        }
      })
      .value(this.amount)
      .width('100%')
      .height(40)
      .padding(10)
      .borderRadius(5)
      .borderWidth(1)
      .borderColor('#ccc');
  }
}

在这个示例中，onChange事件监听输入内容的变化，并使用正则表达式/^\d+(\.\d{0,2})?$/来验证输入是否符合金额格式。正则表达式允许整数部分和最多两位小数的金额输入。如果输入内容不符合正则表达式，则不会更新this.amount的值。

回到顶部