TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next

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

TextInput设置最多两位小数且整数部分不超过6位 - HarmonyOS 鸿蒙Next

cke_240.png 
 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)

Harmonyos Next教程
12 回复

自定义键盘

[@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禁止触摸方法

[@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> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'0.1'</span>)}`)
    console.info(`<span class="hljs-number">.1</span> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'.1'</span>)}`)
    console.info(`<span class="hljs-number">1.</span> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.'</span>)}`)
    console.info(`<span class="hljs-number">1.0</span> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.0'</span>)}`)

    console.info(`<span class="hljs-number">0.1</span> --&gt; ${<span class="hljs-number">0.1</span>}`)
    console.info(`<span class="hljs-number">.1</span> --&gt; ${<span class="hljs-number">.1</span>}`)
    console.info(`<span class="hljs-number">1.</span> --&gt; ${<span class="hljs-number">1.</span>}`)
    console.info(`<span class="hljs-number">1.0</span> --&gt; ${<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) =&gt; {
      <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> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'0.1'</span>)}`)
    console.info(`<span class="hljs-number">.1</span> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'.1'</span>)}`)
    console.info(`<span class="hljs-number">1.</span> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.'</span>)}`)
    console.info(`<span class="hljs-number">1.0</span> --&gt; ${<span class="hljs-keyword">this</span>.regex.test(<span class="hljs-string">'1.0'</span>)}`)

    console.info(`<span class="hljs-number">0.1</span> --&gt; ${<span class="hljs-number">0.1</span>}`)
    console.info(`<span class="hljs-number">.1</span> --&gt; ${<span class="hljs-number">.1</span>}`)
    console.info(`<span class="hljs-number">1.</span> --&gt; ${<span class="hljs-number">1.</span>}`)
    console.info(`<span class="hljs-number">1.0</span> --&gt; ${<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) =&gt; {
      <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。

在官方文档上没找到这样的方法，如果一定要实现的话，应该是不使用TextInput，而是只使用Text，然后用自定义键盘写逻辑

好的，谢谢大神

大神，如果是端侧app呢，需要触摸，只是设置限制，但是超出限制不能为直接截取为0，保留上次的输入

image.png

参考4楼代码

大神，有其他的方案吗？这种自定义键盘样式上没有与系统软键盘统一，可以用web里面的input方法吗？

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

一时想不到其他方案了。web里的input应该不行。

在HarmonyOS中，要设置TextInput控件以限制输入为最多两位小数且整数部分不超过6位，通常TextInput本身不直接支持这种复杂的格式验证。你可以通过以下几种方式实现：

  1. 监听输入并动态验证：使用TextChangedListener监听文本变化，并使用正则表达式或自定义逻辑来验证和修正输入内容。

  2. 使用格式化字符串：在提交或显示时，使用格式化字符串（如%.2f）来格式化数值，但注意这不会阻止用户输入非法字符。

  3. 自定义键盘或输入面板：如果应用需要高度定制化的输入，可以考虑实现自定义的输入面板。

实现时请注意性能和用户体验，确保验证逻辑不会过于复杂或延迟。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部