HarmonyOS 鸿蒙Next TextInput输入保留三位小数

使用TextInput，.type(InputType.NUMBER_DECIMAL)如何输完只保留三位小数

@Entry
@Component
struct TextInputExample {
  @State message: string = '0.3256'
  controller: TextInputController = new TextInputController()
  build() {
    Column() {
      TextInput({placeholder: '请输入内容', text: this.message })
        .width('100%')
          //类型为带小数点的数字输入模式，inputFilter会导致设置输入框类型(即type接口)附带的文本过滤效果失效
        .type(InputType.NUMBER_DECIMAL)
        .maxLength(11)
          //显示定义正则表达式
        .inputFilter('^-?\\d*\\.?\\d{0,3}$',(e) =>{
     
          console.log('正则表达式-3',JSON.stringify(e))
        })
        .backgroundColor(Color.Green)
    }
  }
}

yuanlaile 2楼•7 天前

在HarmonyOS鸿蒙Next中，若想在TextInput组件中保留三位小数输入，可以通过设置正则表达式来实现输入校验。以下是实现方法：

设置TextInput属性：
- 使用type属性设置为InputType.NUMBER_DECIMAL，启用带小数点的数字输入模式。
- 通过inputFilter属性自定义输入过滤器，允许用户输入数字、小数点，并限制小数位数。
正则表达式：
- 使用正则表达式^[-]?\d*\.?\d{0,3}$进行输入校验。
  - ^[-]?：表示可选的负号。
  - \d*：表示整数部分，可以为零个或多个数字。
  - \.?：表示可选的小数点。
  - \d{0,3}：表示小数部分，可以为零个到三个数字。
示例代码：

@Entry
@Component
struct TextInputExample {
    @State message: string = '';
    controller: TextInputController = new TextInputController();
    build() {
        Column() {
            TextInput({
                placeholder: '请输入内容',
                text: this.message,
                controller: this.controller,
                type: InputType.NUMBER_DECIMAL,
                inputFilter: '^[-]?\d*\.?\d{0,3}$',
                onChange: (text) => {
                    this.message = text;
                }
            }).width('100%');
        }
    }
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。