TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next
TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next
TextInput({
placeholder: ‘’
})
.onFocus(()=>{
this.isFocus = true
})
.onBlur(()=>{
this.isFocus=false
})
.onChange((value)=>{
if(value){
this.maxNum = Math.floor(Number(value) * 100) / 100.0
}
})
.borderColor(Color.White)
.placeholderColor(’#999999’)
.backgroundColor(Color.White)
.style(TextInputStyle.Inline)
.fontSize(16)
.fontFamily(‘PingFangSC-Regular’)
.fontColor(’#A31B18’)
.width(240)
.textAlign(TextAlign.End)
.type(InputType.NUMBER_DECIMAL)更多关于TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
自定义键盘
[@Entry](/user/Entry) [@Component](/user/Component) struct Page47 { controller: TextInputController = new TextInputController(); [@State](/user/State) inputValue: string = '';// 自定义键盘组件 @Builder CustomKeyboardBuilder() { Column() { Button(‘x’) .onClick(() => { // 关闭自定义键盘 this.controller.stopEditing(); }) Grid() { ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, ‘.’, 0, ‘删除’], (item: number | string) => { GridItem() { Button(item + ‘’) .width(110) .onClick(() => { if (item == ‘删除’) { this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1); return; } this.inputValue += item; let regex = /^-?\d{0,6}(?:.\d{0,2})?$/ let test = regex.test(this.inputValue) console.info(
onChange regex.test(<span class="hljs-keyword">this</span>.inputValue) :${test}) if (!test) { this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1); } }) } }) } .maxCount(3) .columnsGap(10) .rowsGap(10) .padding(5) } .backgroundColor(Color.Gray) }
build() { Column() { TextInput({ text: $$this.inputValue, placeholder: ‘请输入内容’, controller: this.controller }) .customKeyboard(this.CustomKeyboardBuilder()) } .height(‘100%’) .width(‘100%’) } }
更多关于TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
TextInput禁止触摸方法
[@Entry](/user/Entry) [@Component](/user/Component) struct Page47 { [@State](/user/State) inputValue: string = ''; regex = /^-?\d{0,6}(?:\.\d{0,2})?$/build() { Column() { Button(‘输入内容测试’).onClick(()=>{ this.inputValue += ‘1’ }) Button(‘正则测试’).onClick(() => {
console.info(`<span class="hljs-number">0.1</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'0.1'</span>)}`) console.info(`<span class="hljs-number">.1</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'.1'</span>)}`) console.info(`<span class="hljs-number">1.</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.'</span>)}`) console.info(`<span class="hljs-number">1.0</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.0'</span>)}`) console.info(`<span class="hljs-number">0.1</span> --> ${<span class="hljs-number">0.1</span>}`) console.info(`<span class="hljs-number">.1</span> --> ${<span class="hljs-number">.1</span>}`) console.info(`<span class="hljs-number">1.</span> --> ${<span class="hljs-number">1.</span>}`) console.info(`<span class="hljs-number">1.0</span> --> ${<span class="hljs-number">1.0</span>}`) }) TextInput({ text: $$<span class="hljs-keyword">this</span>.inputValue, placeholder: <span class="hljs-string">'请输入内容'</span> }).hitTestBehavior(HitTestMode.None) .onChange((value: string) => { <span class="hljs-keyword">let</span> regex = <span class="hljs-regexp">/^-?\d{0,6}(?:\.\d{0,2})?$/</span> <span class="hljs-keyword">let</span> test = regex.test(<span class="hljs-keyword">this</span>.inputValue) console.info(`onChange regex.test(<span class="hljs-keyword">this</span>.inputValue) :${test}`) <span class="hljs-keyword">if</span> (!test) { <span class="hljs-keyword">this</span>.inputValue = <span class="hljs-keyword">this</span>.inputValue.substring(<span class="hljs-number">0</span>, <span class="hljs-keyword">this</span>.inputValue.length - <span class="hljs-number">1</span>); } }) } .height(<span class="hljs-string">'100%'</span>) .width(<span class="hljs-string">'100%'</span>)
} }
1、TextInput需要用$$绑定属性：text: $$this.inputValue,
2、在onChange使用正则/^-?\d{0,6}(?:\.\d{0,2})?$/判断不符合规则的就删掉最近输入的一位内容
参考
[@Entry](/user/Entry) [@Component](/user/Component) struct Page47 { [@State](/user/State) inputValue: string = ''; regex = /^-?\d{0,6}(?:\.\d{0,2})?$/build() { Column() { Button(‘正则测试’).onClick(() => {
console.info(`<span class="hljs-number">0.1</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'0.1'</span>)}`) console.info(`<span class="hljs-number">.1</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'.1'</span>)}`) console.info(`<span class="hljs-number">1.</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.'</span>)}`) console.info(`<span class="hljs-number">1.0</span> --> ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.0'</span>)}`) console.info(`<span class="hljs-number">0.1</span> --> ${<span class="hljs-number">0.1</span>}`) console.info(`<span class="hljs-number">.1</span> --> ${<span class="hljs-number">.1</span>}`) console.info(`<span class="hljs-number">1.</span> --> ${<span class="hljs-number">1.</span>}`) console.info(`<span class="hljs-number">1.0</span> --> ${<span class="hljs-number">1.0</span>}`) }) TextInput({ text: $$<span class="hljs-keyword">this</span>.inputValue, placeholder: <span class="hljs-string">'请输入内容'</span> }) .onChange((value: string) => { <span class="hljs-keyword">let</span> regex = <span class="hljs-regexp">/^-?\d{0,6}(?:\.\d{0,2})?$/</span> <span class="hljs-keyword">let</span> test = regex.test(<span class="hljs-keyword">this</span>.inputValue) console.info(`onChange regex.test(<span class="hljs-keyword">this</span>.inputValue) :${test}`) <span class="hljs-keyword">if</span> (!test) { <span class="hljs-keyword">this</span>.inputValue = <span class="hljs-keyword">this</span>.inputValue.substring(<span class="hljs-number">0</span>, <span class="hljs-keyword">this</span>.inputValue.length - <span class="hljs-number">1</span>); } }) } .height(<span class="hljs-string">'100%'</span>) .width(<span class="hljs-string">'100%'</span>)
} }
结果是test为false， this.inputValue 里的值为0，怎么样让它的值停留在上一次记录，比如输入是668822.33，length是9 ；下次的输入是6688822.33，length是10；让 this.inputValue的值停在上一次，输入保持为668822.33，length是9。
找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17
在HarmonyOS中，要设置TextInput控件以限制输入为最多两位小数且整数部分不超过6位，通常TextInput本身不直接支持这种复杂的格式验证。你可以通过以下几种方式实现：
-
监听输入并动态验证：使用
TextChangedListener监听文本变化，并使用正则表达式或自定义逻辑来验证和修正输入内容。 -
使用格式化字符串：在提交或显示时，使用格式化字符串（如
%.2f）来格式化数值，但注意这不会阻止用户输入非法字符。 -
自定义键盘或输入面板：如果应用需要高度定制化的输入，可以考虑实现自定义的输入面板。
实现时请注意性能和用户体验，确保验证逻辑不会过于复杂或延迟。如果问题依旧没法解决请加我微信，我的微信是itying888。
更多关于TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
