HarmonyOS 鸿蒙Next TextInput如何设置输入为最多两位小数且整数部分不超过6位 使用系统原生键盘

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next TextInput如何设置输入为最多两位小数且整数部分不超过6位 使用系统原生键盘

TextInput如何设置输入为最多两位小数且整数部分不超过6位，使用系统原生键盘

Harmonyos Next教程
2 回复

参考demo

@Entry

@Component

struct TextInputExample {

@State message: string = '0.3256'

controller: TextInputController = new TextInputController()

build() {

Column() {

TextInput({placeholder: '请输入内容', text: this.message })

.onChange((text)=>{

this.message = text;

let regex = /^-?\d{0,6}(?:\.\d{0,2})?$/

let test = regex.test(this.message)

console.info(`onChange regex.test(this.inputValue) :${test}`)

if (!test) {

this.message = this.message.substring(0, this.message.length - 1);

}

})

.width('100%')

//类型为带小数点的数字输入模式，inputFilter会导致设置输入框类型(即type接口)附带的文本过滤效果失效

.type(InputType.NUMBER_DECIMAL)

.maxLength(11)

//显示定义正则表达式

.backgroundColor(Color.Red)

}

}

}

在HarmonyOS 鸿蒙Next中，为TextInput组件设置输入为最多两位小数且整数部分不超过6位，可以使用系统原生键盘并结合正则表达式进行校验。

具体实现方法如下：

  1. 为TextInput组件设置type属性为InputType.NUMBER_DECIMAL，以启用带小数点的数字输入模式。
  2. 在onChange事件中，使用正则表达式/^-?\d{0,6}(?:\.\d{0,2})?$/进行校验。该正则表达式确保输入内容为一个可选的负号，后跟0到6位的整数部分，以及一个可选的小数点和小数点后0到2位的数字。
  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,
                onChange: (text) => {
                    this.message = text;
                    let regex = /^-?\d{0,6}(?:\.\d{0,2})?$/;
                    if (!regex.test(this.message)) {
                        this.message = this.message.substring(0, this.message.length - 1);
                    }
                }
            }).width('100%');
        }
    }
}

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

回到顶部