HarmonyOS鸿蒙Next中多行输入框点击确定校验不通过的单号文本改成红色

HarmonyOS鸿蒙Next中多行输入框点击确定校验不通过的单号文本改成红色 cke_544.png

校验不通过的单号，非固定位置，目前尝试用RichEditor组件，start: 0, end: 10，不支持多个位置。哪位大佬有更好的方案，非常感谢！


更多关于HarmonyOS鸿蒙Next中多行输入框点击确定校验不通过的单号文本改成红色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

使用updateSpanStyle：更新文本、图片或SymbolSpan样式。

示例demo如下：

@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };
  @State fs: number = 30;
  @State cl: number = Color.Black;
  @State value: string = ''

  aboutToAppear() {
    this.getUIContext().getFont().registerFont({
      familyName: 'MiSans-Bold',
      familySrc: '/font/MiSans-Bold.ttf'
    })
  }

  build() {
    Scroll() {
      Column() {
        RichEditor(this.options)
          .onReady(() => {
            this.controller.addTextSpan(" ",
              {
                style:
                {
                  fontColor: Color.Black,
                }
              })
          })
          .onIMEInputComplete((value: RichEditorTextSpanResult) => {
            console.info("value:" + value.value);
            this.value = value.value
          })
          .borderWidth(1)
          .width("100%")
          .height("50%")

        Row({ space: 5 }) {
          Button('设置部分字段为为红色')
            .fontSize(10)
            .onClick(() => {
              let indexList = this.value.split(",")
              let start = 0
              let end = 0
              for (let i = 0; i < indexList.length; i++) {
                start = end === 0 ? 0 : end + 1
                end = start + indexList[i].length
                if (i === 3 || i === 5) {
                  this.controller.updateSpanStyle({
                    start: start, // 当前span起始位置
                    end: end, // 当前span结束位置
                    textStyle: {
                      fontColor: Color.Red,
                      fontSize: 18
                    }
                  });
                }
              }
            })
        }
      }.borderWidth(1).borderColor(Color.Red)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中多行输入框点击确定校验不通过的单号文本改成红色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个start和end，支持设置多段不同的索引范围吗？

暂时不支持，不过您的需求可以按照以上demo来实现。

感谢，基本实现效果了，

我现在要能支持多段设置文本为红色，不是一段范围内

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

编辑态也要多种颜色吗？

在HarmonyOS Next中，可通过自定义TextInput组件样式实现校验不通过时单号文本变红。使用@State装饰器管理输入状态，结合条件渲染动态设置文本颜色。当校验失败时，将文本颜色属性设置为Color.Red。通过onSubmit事件触发校验逻辑，更新状态变量控制颜色切换。需在ArkTS中实现校验函数，返回布尔值决定是否应用红色样式。

在HarmonyOS Next中，RichEditor组件目前确实不支持同时设置多个文本样式范围。针对多行输入框中校验不通过的单号需要高亮显示的需求，建议采用以下方案：

  1. 使用TextArea + 自定义Span样式：

    • 通过TextArea获取完整文本内容
    • 使用正则表达式匹配所有不通过的单号位置
    • 创建SpannableStringBuilder，对每个匹配位置应用ForegroundColorSpan设置红色

  2. 关键代码示例：

// 假设invalidNumbers包含所有校验失败的单号位置
let spannable = new SpannableStringBuilder(fullText);
invalidNumbers.forEach(pos => {
  spannable.setSpan(
    new ForegroundColorSpan(Color.Red),
    pos.start,
    pos.end,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
  );
});
textArea.setContent(spannable);
  1. 动态更新：
    • 在每次校验后重新构建SpannableString
    • 通过setContent方法更新TextArea显示

这种方法可以灵活处理任意位置、任意数量的高亮需求，且性能较好。

回到顶部