HarmonyOS 鸿蒙Next 格式化InputText 输入的内容，再回显到InputText

HarmonyOS 鸿蒙Next 格式化InputText 输入的内容，再回显到InputText

TextInput({
  text: `当前内容: ${this.stringBuilder}`,
  placeholder: '请输入手机号'
})
.textInputStyle(13)
.type(InputType.Number)
.onChange((value: string) => {
  const formatText = this.phoneChange(value)
  if(formatText !== this.stringBuilder){
    this.stringBuilder = formatText
  }
  Log.e(this.stringBuilder)
}).onFocus(() => {
})

目前输入框改变，根本不能回显格式化后的输入内容


更多关于HarmonyOS 鸿蒙Next 格式化InputText 输入的内容，再回显到InputText的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

参考下示例代码：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textinput-V5# 示例6电话号码格式化

更多关于HarmonyOS 鸿蒙Next 格式化InputText 输入的内容，再回显到InputText的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你格式化后的内容是否符合TextInput设置的输入格式？是不是有字母或者空格，可以把phoneChange方法贴出来看下

确实格式化后的代码有空格，现在根本就不变，

要实现实时同步的效果需要使用双向绑定:

TextInput({ text:$$this.stringBuilder, placeholder: ‘请输入手机号’ }) 但是你设置了Number类型的输入框是无法设置空格内容的，

可以回显的，直接用变量接收value值。你代码那里是不是你的if条件不为true，

TextInput({ text: this.phone, placeholder: '请输入手机号码' })
  .type(InputType.PhoneNumber)
  .onChange((value: string) => {
    this.phone = value
  })

不是啊，

在HarmonyOS鸿蒙Next中，可以通过在TextInput组件的onChange事件中实现输入内容的格式化，并将格式化后的内容回显到TextInput中。具体步骤如下：

  1. 在ArkTS中定义TextInput组件，并绑定onChange事件。
  2. 在onChange事件处理函数中，获取用户输入的内容。
  3. 对输入内容进行格式化处理。
  4. 将格式化后的内容通过set方法重新设置到TextInput组件中。

示例代码如下：

@Entry
@Component
struct MyComponent {
  @State private inputText: string = '';

  build() {
    Column() {
      TextInput({ text: this.inputText })
        .onChange((value: string) => {
          // 格式化输入内容
          const formattedText = this.formatInput(value);
          // 回显格式化后的内容
          this.inputText = formattedText;
        })
    }
  }

  // 自定义格式化函数
  private formatInput(value: string): string {
    // 实现自定义的格式化逻辑
    return value.toUpperCase(); // 示例：将输入内容转为大写
  }
}
回到顶部