TextInput设置最多两位小数且整数部分不超过6位

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)

phonegap100 1楼•15 天前

自定义键盘

[@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%’)
}
}

h691938207 2楼•15 天前作者

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>)
}
}

caililin 3楼•15 天前

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>)
}
}

eggper 4楼•15 天前

结果是test为false， this.inputValue 里的值为0，怎么样让它的值停留在上一次记录，比如输入是668822.33，length是9 ；下次的输入是6688822.33，length是10；让 this.inputValue的值停在上一次，输入保持为668822.33，length是9。

h691938207 5楼•15 天前作者

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