HarmonyOS6 半年磨一剑 - RcTextarea 组件格式化与字数统计实战

文章目录前言一、字数统计机制1.1 renderCount 的渲染逻辑1.2 maxlength 的双重作用1.3 字数统计样式定制二、formatter 格式化实战2.1 大写转换器2.2 行数限制格式化器三、parser 过滤实战3.1 HTML 标签过滤器防 XSS3.2 parser formatter 联合使用四、综合实战带字数统计的反馈表单总结前言输入格式化和字数统计是多行文本域中两个高频需求。评论框需要限制字数并给用户实时反馈内容编辑器需要自动将特殊字符过滤标签输入需要将用户输入统一转换为规范格式……这些看似简单的需求背后需要组件提供灵活可靠的扩展机制。RcTextarea通过formatter、parser两个回调函数和maxlength、showCount两个参数以最小的 API 面积覆盖了绝大多数格式化与字数统计场景。本文将深入讲解这四个参数的底层实现并通过多个实战案例展示如何构建大写转换器、字数限制输入框、内容过滤器和多场景字数统计组件。一、字数统计机制1.1 renderCount 的渲染逻辑BuilderrenderCount(){if(this.showCountthis.maxlength0){Row(){Text(${this.innerValue.length}/${this.maxlength}).fontSize(12).fontColor(#909399).margin({top:4})}.width(100%).justifyContent(FlexAlign.End)}}字数统计的显示有两个前置条件缺一不可showCount: true— 开发者显式开启maxlength 0— 有明确的字数上限-1时不显示统计统计数字基于innerValue.length内部处理后的值而非原始输入确保格式化后的字符数准确。提示若需要不限字数但仍显示已输入字数可以设置一个极大的maxlength如maxlength{9999}来规避maxlength 0的判断或在外部用onInputChange自行实现字数显示组件。1.2 maxlength 的双重作用// 1. 控制 TextArea 原生最大长度限制TextArea({...}).maxLength(this.maxlength0?this.maxlength:undefined)// 2. 控制字数统计显示renderCount 中的判断if(this.showCountthis.maxlength0){...}maxlength同时影响两处逻辑当maxlength 0时系统底层 TextArea 会强制限制输入长度超出无法继续输入当maxlength 0即-1时传入undefined给 TextArea表示不限长度maxlength值原生长度限制字数统计显示 0如 200硬限制超出不可输入显示需配合showCount: true -1无限制不显示 0等效无限制不显示1.3 字数统计样式定制默认的字数统计样式灰色小字右对齐适合大多数场景。如果需要自定义样式可以关闭showCount用onInputChange配合外部组件自行实现import{RcTextarea}fromrchouiEntryComponentV2struct CustomCountExample{Localcontent:stringreadonlyMAX_LENGTH:number300build(){Column({space:8}){RcTextarea({value:this.content,onValueChange:(val:string){this.contentval},maxlength:this.MAX_LENGTH,showCount:false,// 关闭内置统计自行实现placeholder:请输入内容...})// 自定义字数统计样式Row(){Text(this.content.lengththis.MAX_LENGTH*0.9?即将达到上限:字数统计).fontSize(12).fontColor(this.content.lengththis.MAX_LENGTH*0.9?#F56C6C:#C0C4CC)Blank()Text(${this.content.length}).fontSize(12).fontColor(this.content.lengththis.MAX_LENGTH*0.9?#F56C6C:#409EFF).fontWeight(FontWeight.Medium)Text(/${this.MAX_LENGTH}).fontSize(12).fontColor(#C0C4CC)}.width(100%)}.padding(20).width(100%)}}二、formatter 格式化实战2.1 大写转换器最典型的格式化场景——将英文输入自动转为大写import{RcTextarea}fromrchouiEntryComponentV2struct UppercaseFormatterExample{Localtext:stringbuild(){Column({space:16}){Text(自动转大写输入框).fontSize(18).fontWeight(FontWeight.Bold)RcTextarea({value:this.text,onValueChange:(val:string){this.textval},formatter:(value:string)value.toUpperCase(),placeholder:输入英文字母自动转换为大写,maxlength:100,showCount:true,clearable:true})Text(实际存储的值${this.text}).fontSize(13).fontColor(#909399)}.padding(20).width(100%)}}2.2 行数限制格式化器限制每行文字的最大长度适用于需要控制每行字符数的场景如短信模板编辑import{RcTextarea}fromrchouiEntryComponentV2struct LineLimitFormatterExample{LocalsmsContent:stringreadonlyMAX_PER_LINE:number30build(){Column({space:16}){Text(短信内容编辑器).fontSize(18).fontWeight(FontWeight.Bold)Text(每行最多${this.MAX_PER_LINE}字).fontSize(13).fontColor(#909399)RcTextarea({value:this.smsContent,onValueChange:(val:string){this.smsContentval},formatter:(value:string){// 每行截断到 MAX_PER_LINE 个字符returnvalue.split(\n).map((line:string)line.substring(0,this.MAX_PER_LINE)).join(\n)},maxlength:-1,autoHeight:true,placeholder:请输入短信内容每行最多30字...,clearable:true})}.padding(20).width(100%)}}三、parser 过滤实战3.1 HTML 标签过滤器防 XSS在用户生成内容UGC场景中过滤 HTML 标签是基础的安全需求import{RcTextarea}fromrchouiEntryComponentV2struct HtmlFilterExample{LocalsafeContent:stringbuild(){Column({space:16}){Text(安全内容输入过滤HTML标签).fontSize(18).fontWeight(FontWeight.Bold)RcTextarea({value:this.safeContent,onValueChange:(val:string){this.safeContentval},parser:(value:string){// 过滤所有 HTML 标签returnvalue.replace(/[^]*/g,)},maxlength:300,showCount:true,autoHeight:true,placeholder:请输入内容HTML标签将被自动过滤})Text(过滤后内容${this.safeContent}).fontSize(12).fontColor(#909399)}.padding(20).width(100%)}}3.2 parser formatter 联合使用两个函数串联时parser先清洗数据formatter再格式化展示import{RcTextarea}fromrchouiEntryComponentV2struct ParserFormatterComboExample{LocaltagText:stringbuild(){Column({space:16}){Text(标签输入自动规范化).fontSize(18).fontWeight(FontWeight.Bold)Text(过滤特殊字符 - 自动转小写).fontSize(13).fontColor(#909399)RcTextarea({value:this.tagText,onValueChange:(val:string){this.tagTextval},parser:(value:string){// 第一步只保留字母、数字、空格、换行、逗号returnvalue.replace(/[^a-zA-Z0-9 \n,]/g,)},formatter:(value:string){// 第二步转小写returnvalue.toLowerCase()},maxlength:200,showCount:true,autoHeight:true,placeholder:输入标签用逗号或换行分隔...,clearable:true})Text(规范化后${this.tagText}).fontSize(12).fontColor(#67C23A)}.padding(20).width(100%)}}四、综合实战带字数统计的反馈表单以下是一个完整的产品反馈表单综合运用了字数统计、内容过滤和格式化能力import{RcTextarea}fromrchouiEntryComponentV2struct FeedbackFormExample{LocaltitleText:stringLocaldescText:stringLocaltagText:stringLocalsubmitResult:stringprivatehandleSubmit():void{if(!this.titleText.trim()){this.submitResult请填写标题return}if(this.descText.length10){this.submitResult详细描述至少需要10个字return}this.submitResult提交成功\n标题${this.titleText}\n描述${this.descText.substring(0,20)}...\n标签${this.tagText}}build(){Scroll(){Column({space:20}){Text(问题反馈表单).fontSize(22).fontWeight(FontWeight.Bold).margin({top:20})// 标题输入自动去除首尾多余空格限制50字Column({space:6}){Text(问题标题).fontSize(14).fontWeight(FontWeight.Medium)RcTextarea({value:this.titleText,onValueChange:(val:string){this.titleTextval},parser:(value:string)value.replace(/\n/g,),// 单行过滤换行maxlength:50,showCount:true,textareaHeight:50,placeholder:请简要描述问题最多50字,clearable:true})}.alignItems(HorizontalAlign.Start).width(100%)// 详细描述自动过滤HTML限制500字自动增高Column({space:6}){Text(详细描述).fontSize(14).fontWeight(FontWeight.Medium)RcTextarea({value:this.descText,onValueChange:(val:string){this.descTextval},parser:(value:string)value.replace(/[^]*/g,),maxlength:500,showCount:true,autoHeight:true,placeholder:请详细描述您遇到的问题至少10字最多500字,clearable:true,textareaBorderRadius:8})}.alignItems(HorizontalAlign.Start).width(100%)// 标签输入自动转小写、过滤特殊字符Column({space:6}){Text(相关标签用逗号分隔).fontSize(14).fontWeight(FontWeight.Medium)RcTextarea({value:this.tagText,onValueChange:(val:string){this.tagTextval},parser:(value:string)value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5,\s]/g,),formatter:(value:string)value.toLowerCase(),textareaHeight:50,maxlength:100,showCount:true,placeholder:如崩溃, 卡顿, 白屏,clearable:true})}.alignItems(HorizontalAlign.Start).width(100%)// 提交按钮Button(提交反馈).width(100%).height(44).borderRadius(8).onClick((){this.handleSubmit()})// 提交结果if(this.submitResult){Text(this.submitResult).fontSize(14).fontColor(this.submitResult.startsWith(提交成功)?#67C23A:#F56C6C).padding(12).backgroundColor(this.submitResult.startsWith(提交成功)?#F0F9EB:#FEF0F0).borderRadius(8).width(100%)}}.width(90%).padding({bottom:40})}.width(100%).height(100%).backgroundColor(#F5F7FA)}}总结RcTextarea 的格式化与字数统计系统通过parser - formatter的串行管道设计和maxlength showCount的双参数控制以极简的 API 面积覆盖了从数据清洗到展示格式化的完整链路。实际开发中formatter适合处理展示层面的转换parser适合处理数据层面的过滤两者分工明确、互不干扰是构建高质量多行输入体验的有力工具。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是我持续创作的动力