uni-app x textarea 多行输入框组件完全指南：属性、事件、原生 View 获取与键盘上推实践

uni-app x textarea 多行输入框组件完全指南属性、事件、原生 View 获取与键盘上推实践【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app本文以 uni-app x 官方组件文档 docs/component/textarea.md 为骨架结合开源仓库 uni-app 内uni-textarea组件的真实源码textarea.uvue、app-harmony/index.uts、cppsdk/textarea.h与官方示例页textarea.uvue、textarea-performance.uvue系统讲解多行输入框的组件类型、全部属性与事件语义、confirm-type/inputmode合法值、键盘上推策略、占位符样式限制以及获取原生AppCompatEditText/UITextView对象的高级用法。textarea 是什么textarea是 uni-app x 中的多行文本输入框组件与单行输入框input互为补充用于收集用户输入的较长文本如备注、简介、反馈内容等。它的组件类型为 UniTextareaElement即 textarea 在 DOM 树中对应的元素对象继承自UniElement扩展出name、disabled、autofocus、value等属性值。兼容性| Web | 微信小程序 | Android | iOS | HarmonyOS | | :- | :- | :- | :- | :- | | 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |上表数值为 uni-app x 引入对应能力的最低 HBuilderX 版本号。部分属性如cursor-spacing、fixed、show-confirm-bar、hold-keyboard在不同平台的兼容版本并不一致具体以各属性表格中的兼容性列为准。组件属性全解析textarea 的所有属性均通过v-bind或静态方式传入下表完整列出官方文档定义的属性及其默认值。| 名称 | 类型 | 默认值 | 兼容性 | 描述 | | :- | :- | :- | :-: | :- | | name | string | textarea | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 表单的控件名称作为键值对的一部分与表单(form组件)一同提交 | | disabled | boolean | false | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 是否禁用 | | value | string | | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 输入框的初始内容 | | placeholder | string | | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 输入框为空时占位符 | | placeholder-style | string | | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 指定 placeholder 的样式 | | placeholder-class | string(string.ClassString) | | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 指定 placeholder 的样式类 | | maxlength | string | number | -1 | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 最大输入长度0和正数为合法值非法值的时候不限制最大长度 | | auto-focus | boolean | false | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 自动获取焦点与focus属性对比此属性只会首次生效 | | focus | boolean | false | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 获取焦点 | | confirm-type | string | return | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.15; HarmonyOS: 4.61 | 设置键盘右下角按钮的文字 | | cursor | number | -1 | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 指定focus时的光标位置 | | confirm-hold | boolean | false | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 点击键盘右下角按钮时是否保持键盘不收起 | | auto-height | boolean | false | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.65 | 是否自动增高设置auto-height时style.height不生效 | | cursor-spacing | number | 0 | Web: x; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: x | 指定光标与键盘的距离单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | | cursor-color | string(string.ColorString) | | Web: 4.0; 微信小程序: 4.41; Android: 3.99; iOS: 4.11; HarmonyOS: 4.61 | 指定光标颜色 | | selection-start | number | -1 | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 光标起始位置自动聚集时有效需与selection-end搭配使用 | | selection-end | number | -1 | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 光标结束位置自动聚集时有效需与selection-start搭配使用 | | adjust-position | boolean | true | Web: x; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 键盘弹起时是否自动上推页面 | | hold-keyboard | boolean | false | Web: x; 微信小程序: 4.41; Android: 4.0; iOS: 4.11; HarmonyOS: 4.61 | focus时点击页面的时候不收起键盘 | | inputmode | none | text | decimal | numeric | tel | search | email | url | text | Web: 4.0; 微信小程序: x; Android: x; iOS: x; HarmonyOS: x | 枚举属性提示用户在编辑元素或其内容时可能输入的数据类型。在符合条件的高版本webview里uni-app的 web 和 app-vue 平台中可使用本属性 | | fixed | boolean | — | Web: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x | 如果 textarea 是在一个 position:fixed 的区域需要显示指定属性 fixed 为 true | | show-confirm-bar | boolean | — | Web: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x | 是否显示键盘上方带有完成按钮那一栏 |关键属性解读name 与表单提交name默认值为textarea。在仓库源码 textarea.uvue 中可以看到组件挂载时会通过inject获取 form 上下文UNI_FORM_CTX并以name为键注册registerField({ name, getValue, reset })卸载时调用unregisterField反注册。因此设置了name的 textarea 会自动成为 form 表单提交数据的一部分。value 与 modelValue源码中getInitValue()的规则是modelValue非空时优先使用modelValue否则回退到valuetextarea.uvue。watch监听两者变化并同步到原生视图同时会按maxlength截断超长内容。maxlength默认-1表示不限制0表示禁止输入正整数表示最大长度。源码中所有写入路径如props.value/props.modelValue变化都会执行substring(0, maxlength)截断逻辑。auto-focus 与 focus 的区别auto-focus只在组件首次渲染时生效一次而focus是可重复触发的布尔开关置为true即聚焦、false即失焦。adjust-position默认true即软键盘弹出时自动上推页面避免输入框被遮挡详细策略见下文键盘上推专题。fixed 与 show-confirm-bar这两个属性仅微信小程序平台支持。当 textarea 处于position: fixed的区域时必须显式设置fixed为trueshow-confirm-bar控制键盘上方带有完成按钮的那一栏是否显示。布尔属性统一规则所有 boolean 类型属性只有设置为布尔类型的false才会关闭该属性其他任何值包括字符串false都会被当作true处理微信小程序中空字符串会被视为false。建议始终使用:propfalse的绑定写法。confirm-type 的属性描述confirm-type用于设置键盘右下角按钮的文字textarea 默认值为return换行与 input 组件的默认done不同。| 合法值 | 兼容性 | 描述 | | :- | :-: | :- | | return | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.15; HarmonyOS: 4.61 | 换行 | | send | Web: 4.0; 微信小程序: 4.41; Android: 4.73; iOS: 4.15; HarmonyOS: 4.61 | 发送 | | search | Web: 4.0; 微信小程序: 4.41; Android: 4.73; iOS: 4.15; HarmonyOS: 4.61 | 搜索 | | next | Web: 4.0; 微信小程序: 4.41; Android: 4.73; iOS: 4.15; HarmonyOS: 4.61 | 下一个 | | go | Web: 4.0; 微信小程序: 4.41; Android: 4.73; iOS: 4.15; HarmonyOS: 4.61 | 前往 | | done | Web: 4.0; 微信小程序: 4.41; Android: 4.73; iOS: 4.15; HarmonyOS: 4.61 | 完成 |在 HarmonyOS 平台源码 app-harmony/index.uts 中定义了一张CONFIRM_TYPES映射表将return/send/search/next/go/done分别映射为 ArkUI 的EnterKeyType.NEW_LINE / Send / Search / Next / Go / DoneupdateConfirmType即据此设置键盘回车键类型。inputmode 的属性描述inputmode是标准 HTML 枚举属性提示浏览器应展示哪种软键盘类型。仅 Web: 4.0 平台支持微信小程序、Android、iOS、HarmonyOS 均为x不支持需在符合条件的高版本 webview 中使用。| 合法值 | 兼容性 | 描述 | | :- | :-: | :- | | none | Web: 4.0 | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用 | | text | Web: 4.0 | 使用用户本地区域设置的标准文本输入键盘 | | decimal | Web: 4.0 | 小数输入键盘包含数字和分隔符通常是 . 或 , 设备可能也可能不显示减号键 | | numeric | Web: 4.0 | 数字输入键盘所需要的就是 0 到 9 的数字设备可能也可能不显示减号键 | | tel | Web: 4.0 | 电话输入键盘包含 0 到 9 的数字、星号*和井号#键 | | search | Web: 4.0 | 为搜索输入优化的虚拟键盘比如返回键可能被重新标记为搜索 | | email | Web: 4.0 | 为邮件地址输入优化的虚拟键盘通常包含符号和其他优化 | | url | Web: 4.0 | 为网址输入优化的虚拟键盘比如/键会更加明显、支持历史记录访问等 |inputmode 浏览器兼容性Chrome 66、Edge 79、Firefox 95、Chrome Android 66、Firefox for Android 79、Safari on iOS 12.2、WebView Android 66。组件事件与事件对象textarea 支持 7 个输入相关事件 2 个通用交互事件tap、longpress等与 view 一致所有输入事件对象均继承自UniEvent。| 事件 | 回调签名 | 兼容性 | 说明 | | :- | :- | :- | :- | | confirm | (event: UniInputConfirmEvent) void | Web: 4.0; 微信小程序: 4.41; Android: 4.73; iOS: 4.73; HarmonyOS: 4.61 | 点击完成/右下角按钮时触发event.detail { value }| | input | (event: UniInputEvent) void | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 键盘输入时触发event.detail { value, cursor }input 处理函数的返回值并不会反映到 textarea 上| | linechange | (event: UniTextareaLineChangeEvent) void | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.65 | 输入框行数变化时触发event.detail { height, heightRpx, lineCount }| | blur | (event: UniTextareaBlurEvent) void | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 失去焦点时触发event.detail { value, cursor }| | keyboardheightchange | (event: UniInputKeyboardHeightChangeEvent) void | Web: x; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 键盘高度变化时触发event.detail { height, duration }| | focus | (event: UniTextareaFocusEvent) void | Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61 | 聚焦时触发event.detail { value, height }height 为键盘高度 | | change | (event: UniInputChangeEvent) void | Web: 4.81; 微信小程序: 4.41; Android: 4.73; iOS: 4.73; HarmonyOS: 4.73 |非聚焦状态内容改变时触发仅组件失去焦点且用户输入改变内容时才触发 | | update:value | Event | — | — |UniInputConfirmEventUniInputConfirmEvent -- Extends -- UniEvent属性值| 名称 | 类型 | 必填 | | :- | :- | :- | | detail |UniInputConfirmEventDetail| 是 |detail 属性描述| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | value | string | 是 | 输入框内容 |UniInputEventUniInputEvent -- Extends -- UniEvent属性值| 名称 | 类型 | 必填 | | :- | :- | :- | | detail |UniInputEventDetail| 是 |detail 属性描述| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | value | string | 是 | 输入框内容 | | cursor | number | 是 | 光标的位置 | | keyCode | number | 是 | 输入字符的Unicode值 |在 HarmonyOS 实现中dispatchInput通过updateLineCount()计算行数并在输入期间同步value与cursorapp-harmony/index.uts。UniTextareaLineChangeEventUniTextareaLineChangeEvent -- Extends -- UniEventdetail 属性描述| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | lineCount | number | 是 | 行数 | | heightRpx | number | 是 | textarea的高度 | | height | number | 是 | textarea的高度 |UniTextareaBlurEventUniTextareaBlurEvent -- Extends -- UniEventdetail 属性描述| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | value | string | 是 | 输入框内容 | | cursor | number | 是 | 选择区域的起始位置 |UniInputKeyboardHeightChangeEventUniInputKeyboardHeightChangeEvent -- Extends -- UniEventdetail 属性描述| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | height | number | 是 | 键盘高度 | | duration | number | 是 | 持续时间 |UniTextareaFocusEventUniTextareaFocusEvent -- Extends -- UniEventdetail 属性描述| 名称 | 类型 | 必备 | 兼容性 | 描述 | | :- | :- | :- | :-: | :- | | height | number | 是 | Web: x; Android: 3.9; iOS: 4.11 | 键盘高度 | | value | string | 是 | — | 输入框内容 |UniInputChangeEventUniInputChangeEvent -- Extends -- UniEventdetail 属性描述| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | value | string | 是 | 输入框内容 |在 HarmonyOS 源码中dispatchChange()只有value ! preTextValue时才派发change事件app-harmony/index.uts与文档中非聚焦状态内容改变才触发的语义一致。获取 textarea 的原生 View 对象为增强 uni-app x 组件的开放性从 HBuilderX 4.25 起UniElement 对象提供了 getAndroidView 和 getIOSView 方法可以获取到 textarea 组件对应的原生对象——即 Android 的AppCompatEditText对象、iOS 的UITextView对象进而调用原生对象提供的方法极大扩展组件能力。Android 平台通过uni.getElementById(id)获取 textarea 的 UniElement 对象再调用其getAndroidView方法泛型指定为AppCompatEditText获取原生对象如果泛型不匹配会返回null。// 导入安卓原生AppCompatEditText对象 import AppCompatEditText from androidx.appcompat.widget.AppCompatEditText // 通过textarea组件定义的id属性值获取textarea标签的UniElement对象 const textareaElement uni.getElementById(id) // UniElement.getAndroidView设置泛型为安卓底层AppCompatEditText对象直接获取AppCompatEditText 如果泛型不匹配会返回null if(textareaElement ! null) { // editText就是textarea组件对应的原生view对象 const editText textareaElement.getAndroidViewAppCompatEditText() }iOS 平台通过uni.getElementById(id)获取 UniElement 对象再调用getIOSView()获取原生 view并判断其类型是否为UITextView。// 通过 textarea 组件定义的 id 属性值获取 textarea 标签的 UniElement 对象 const textareaElement uni.getElementById(id) // 获取原生 view const view inputElement?.getIOSView(); // 判断 view 是否存在类型是否为 UITextView if (view ! null view instanceof UITextView) { // 将 view 转换为 UITextView 类型 const textField view! as UITextView; }注意iOS 平台 uvue 环境使用 js 驱动无法处理原生类型getIOSView方法需要在 uts 插件中使用。更多示例可参考仓库内的 uts 插件 uts-get-native-view。完整示例官方示例页核心代码以下代码摘自官方 hello uni-app x 示例页仓库对应文件为 src/pages/component/textarea/textarea.uvue演示了 textarea 的属性绑定、事件监听与动态控制面板的完整用法。script setup languts import { ItemType } from /components/enum-data/enum-data-types type DataType { value2: string; adjust_position_boolean: boolean; show_confirm_bar_boolean: boolean; fixed_boolean: boolean; auto_height_boolean: boolean; confirm_hold_boolean: boolean; focus_boolean: boolean; auto_focus_boolean: boolean; default_value: string; inputmode_enum: ItemType[]; confirm_type_list: ItemType[]; cursor_color: string; cursor: number; inputmode_enum_current: number; confirm_type_current: number; placeholder_value: string; defaultModel: string; textareaMaxLengthValue: string; isSelectionFocus: boolean; selectionStart: number; selectionEnd: number; hold_keyboard: boolean; adjust_position: boolean; disabled: boolean; jest_result: boolean; isAutoTest: boolean; changeValue: string; textareaRect: DOMRect | null; } // 使用reactive避免ref数据在自动化测试中无法访问 const data reactive({ value2: 第一行\n第二行\n第三行\n第四行\n第五行\n第六行\n第七行\n第八行\n第九行\n第十行\n十一行, adjust_position_boolean: false, show_confirm_bar_boolean: false, fixed_boolean: false, auto_height_boolean: false, confirm_hold_boolean: false, focus_boolean: true, auto_focus_boolean: false, default_value: 1\n2\n3\n4\n5\n6, inputmode_enum: [{ value: 1, name: text }, { value: 2, name: decimal }, { value: 3, name: numeric }, { value: 4, name: tel }, { value: 5, name: search }, { value: 6, name: email }, { value: 7, name: url }, { value: 0, name: none }], confirm_type_list: [{ value: 0, name: return }, { value: 1, name: done }, { value: 2, name: send }, { value: 3, name: search }, { value: 4, name: next }, { value: 5, name: go }], cursor_color: #3393E2, cursor: 1\n2\n3\n4\n5\n6.length, inputmode_enum_current: 0, confirm_type_current: 0, placeholder_value: 请输入, defaultModel: 123, textareaMaxLengthValue: , textareaPlaceholderClass: placeholder-class, isSelectionFocus: false, selectionStart: -1, selectionEnd: -1, hold_keyboard: false, adjust_position: false, disabled: false, jest_result: false, inputEventTriggered: false, isAutoTest: false, changeValue: , textareaRect: null, } as DataType) const textarea_confirm () { console.log(点击完成时触发 confirm 事件event.detail {value: value}) } const textarea_input (_e: UniInputEvent) { console.log(当键盘输入时触发 input 事件event.detail {value, cursor} input 处理函数的返回值并不会反映到 textarea 上) } const textarea_linechange () { console.log(输入框行数变化时调用event.detail {height, lineCount}) } const textarea_blur () { console.log(输入框失去焦点时触发event.detail {value, cursor}) } const textarea_keyboardheightchange () { console.log(键盘高度发生变化的时候触发此事件event.detail {height, duration}) } const textarea_focus (event: UniTextareaFocusEvent) { data.jest_result event.detail.height 0 } const textarea_change (event: UniInputChangeEvent) { console.log(textarea_change, event.detail.value); data.changeValue event.detail.value } /script template view classmain uni-theme-root textarea :valuedata.default_value iduni-textarea classuni-textarea themed-textarea :auto-focustrue :focusdata.focus_boolean :confirm-holddata.confirm_hold_boolean :auto-heightdata.auto_height_boolean :fixeddata.fixed_boolean :show-confirm-bardata.show_confirm_bar_boolean :adjust-positiondata.adjust_position_boolean :cursor-colordata.cursor_color :cursordata.cursor :placeholderdata.placeholder_value :inputmodedata.inputmode_enum[data.inputmode_enum_current].name :confirm-typedata.confirm_type_list[data.confirm_type_current].name :disableddata.disabled clicktextarea_click confirmtextarea_confirm inputtextarea_input linechangetextarea_linechange blurtextarea_blur keyboardheightchangetextarea_keyboardheightchange focustextarea_focus changetextarea_change stylepadding: 10px;height: 200px / /view /template子组件约束textarea不可以嵌套组件无 children 标签占位符、光标等能力全部由组件自身与底层原生控件完成。键盘上推专题input和textarea组件都有adjust-position属性默认为true即软键盘弹出时默认上推页面以显示出输入框避免输入框被软键盘遮挡。完整论述见 input 文档的键盘上推专题。默认上推策略软键盘弹出后会挡住输入框此时启动上推逻辑默认策略为如果输入框在 scroll-view 里会优先滚动 scroll-view以保证显示出输入框如果没有可滚动区域会 transform 上移页面以保证显示出输入框。手动控制上推默认的上推策略无法适配所有场景有些场景需要关闭默认上推策略——把adjust-position设为false然后在输入框的focus或keyboardheightchange事件中获取键盘高度手动调整界面。与自定义导航栏的注意事项默认上推策略下如果页面使用了自定义导航栏软键盘弹出后可能把自定义导航栏推出可视范围。此时注意顶部导航栏不能在滚动视图中且需要使用 css 固定在顶部下面放一个 scroll-view输入框放在 scroll-view 中就不会把自定义导航栏顶飞如果这种方式仍不能满足需求则需关闭默认上推策略手动控制。Web 平台的差异在 web 端平台输入框上推逻辑由浏览器自动完成属性adjust-position无效。但 iOS safari 软键盘弹出时整个页面会上推而不是挤压导致 pages.json 配置的导航栏会上移到屏幕之外。在 HarmonyOS 源码中NativeTextareaView在handleFocus时调用uiContext.setKeyboardAvoidMode(KeyboardAvoidMode.NONE)、handleBlur时恢复为KeyboardAvoidMode.OFFSET即通过切换 ArkUI 的键盘避让模式实现聚焦时不避让、失焦后恢复的行为app-harmony/index.uts。placeholder-style 与 placeholder-class 说明uni-app x 4.41 之前App 平台仅支持color、font-size、font-weight。uni-app x 4.41 之后App 平台新增支持font-family、font-style、text-align其中text-align仅 App-Android 平台支持App-iOS 平台的 placeholder 位置取决于 textarea 的text-align。App-HarmonyOS 的placeholder-class暂不支持 css 变量。在组件实现层面App 端 placeholder 是一个独立的text元素textarea.uvue其placeholderStyle计算逻辑会读取 textarea 自身的font-size并拼接到内联样式中textarea.uvue从而实现占位符字体与输入字体一致的效果。Tips平台行为与已知限制uni-app x 4.0 起App-Android 平台 textarea 点击输入框外的屏幕会自动收起软键盘。uni-app x 4.0 起App-Android 平台 textarea 的 font-size 默认值统一为 16pxline-height 默认值为 1.2emwidth 默认值为 300px。uni-app x 4.15 起App-iOS 平台 textarea 软键盘默认右下角改为 return(换行)换行时键盘不会收起。由于 Android 系统限制textarea 的键盘右下角按钮只能是换行所以暂时不提供confirm-type属性对应 Android 平台。补充说明官方属性表中confirm-type标注的 Android 兼容版本为 3.9/4.73但 Tips 明确 Android 受系统限制仅支持换行按钮因此confirm-type在 Android 上的实际效果以系统表现为准send/search/next/go/done等按钮文字在 Android 上无法呈现。当软键盘右下角为换行时confirm-hold恒为 true设置为 false 也不生效即按下换行时软键盘不会消失。在 Android 9 以下的系统版本样式line-height点击键盘换行时行间距设置无效此问题是 Android 系统的 bug。App 平台蒸汽模式vapor样式设置暂不支持 css 变量。所有 boolean 类型的属性只有设置为布尔类型的false才会关闭该属性其他任何值包括字符串false都会被当做true处理微信小程序中空字符串会被视为false。底层实现uni-textarea 组件模块结构该组件在仓库中的完整实现位于 src/uni_modules/uni-textarea 模块| 文件 | 作用 | | :- | :- | | components/textarea/textarea.uvue | 组件主入口模板、属性声明withDefaults默认值、事件defineEmits、与原生视图的桥接逻辑、form 表单注册/反注册 | | utssdk/app-harmony/index.uts | HarmonyOS 平台NativeTextareaView与UniTextareaElement实现包含 ArkUI BuilderNode 绑定、TextAreaController控制、confirm-type 映射、光标/选区/行数计算 | | utssdk/app-harmony/textarea.ets | ArkUI 侧 TextArea 组件封装与 Builder 定义 | | cppsdk/textarea.h | C 侧Textarea类UniVueComponent管理键盘高度、聚焦状态与 adjust-position | | cppsdk/textarea.cpp | C 侧实现处理元素位置与键盘上推 |从源码结构看textarea 在 App 端采用uvue 组件壳 原生控件的混合渲染方案AppAndroid/iOStextarea.uvue内部通过native-view承载原生输入控件并在onViewInit中创建NativeTextareaView实例随后把全部属性value、disabled、selection、focus、confirm-type、auto-height、adjust-position、hold-keyboard、maxlength、cursor-color 等逐一updateXxx同步到原生层textarea.uvue同时用watch监听 props 变化实时更新原生视图textarea.uvue。HarmonyOS通过bindHarmonyWrappedBuilder将 ArkUI 的TextArea包装成 BuilderNode 挂在UniNativeViewElement上TextAreaController负责光标caretPosition、选区setTextSelection、行数getTextContentLineCount与内容尺寸getTextContentRect等操作app-harmony/index.uts。Web直接渲染原生textarea /标签textarea.uvue。性能与自动化测试参考仓库提供了两个与 textarea 直接相关的实战页面src/pages/component/textarea/textarea.uvue官方 textarea 示例页与本文示例同源覆盖属性控制面板、maxlength、cursor-spacing、selection-start/end、hold-keyboard、v-model 与 value 共存、line-height/min-height/max-height 与 auto-height 组合、scroll-view 嵌套滚动、自定义字体Pacifico等全部场景其中textarea_focus通过event.detail.height 0校验键盘高度事件数据供 jest 自动化测试断言。src/pages/component/textarea/textarea-performance.uvue性能测试页单页渲染 100 个 textarea 组件配合fps组件监控帧率通过清空内容/禁用输入按钮与共享 value 验证大批量 textarea 的输入响应性能。相关资源组件类型定义UniTextareaElementtextarea 的 DOM 元素对象扩展name、disabled、autofocus、value属性UniElement 原生对象获取getAndroidView / getIOSView单行输入框对照input 组件文档含键盘上推专题与 inputmode 说明相关 Bug 反馈与各小程序平台官方文档可前往 DCloud 社区及各平台开发者文档检索。【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考