Lynx textarea 元素跨平台实战属性、事件与 UI 方法全解析【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx本文基于 Lynx 官方 API 文档技能库中的textarea元素指南ai/skills/lynx-api-docs/skills/using-lynx-api-docs/elements/textarea.md完整讲解原生 Android、iOS 与 Harmony 三端下textarea的使用时机选择、属性与事件模型、UI 方法调用方式并结合开源仓库中TextAreaNGView的源码实现帮助开发者掌握多行文本输入组件在三端的行为差异与工程化规避方案。适用场景与选型判断textarea是 Lynx 中的原生多行文本编辑元素。文档给出了明确的选型边界应该使用textarea的场景需要原生多行文本编辑器native multiline text editor内容会跨越多行需要行数统计或maxlines行数控制需要以编程方式控制焦点focus、失焦blur、取值value与选区selection多行输入域需要 submit / confirm 行为而不想退回到单行input的实现路径。不应使用textarea的场景需要真正的单行输入域——此时应选input例如值必须保持单行、回车键语义始终是单行确认、精确的单行键盘行为比多行编辑更重要时。需要跨平台一致的beforeinput事件——该事件目前仅在 iOS 上可用需要 Harmony 平台安全的密码型 textarea 行为——Harmony 下typepassword没有本地映射。跨平台护栏Guardrail速览——这是文档中最重要的四条行为约束直接决定三端代码写法Harmony 密码护栏如果 Harmony 在目标平台范围内不要依赖textarea的typepasswordiOSmaxlength护栏当粘贴文本长度超过剩余可输入容量时当前原生 iOStextarea会截断clip粘贴片段而不是完整接受剪贴板内容行数信号护栏line: -1仅应视为 iOS 或 Android 的maxlines溢出信号Harmony 的line字段报告的是当前行数键盘避让护栏Android 在目标范围内时avoid-keyboard-spacing应使用字符串单位如12px。快速上手基础多行 textareatextarea placeholderWrite your comment maxlength{200} maxlines{6} /带 confirm 与行数追踪的 textareatextarea idfeedback placeholderTell us what happened confirm-typedone maxlines{4} bindinput{handleInput} bindline{handleLine} bindconfirm{handleConfirm} /两个示例覆盖了最核心的三个属性maxlength限制文本长度maxlines限制可见/可接受行数confirm-type指定确认动作。类型定义文件 js_libraries/types/types/common/element/textarea.d.ts 中同样声明了maxlines?: number等属性与文档描述一致。属性详解核心属性属性类型作用placeholderstring设置占位文本typetext \| number \| digit \| tel \| email选择 textarea 输入类型与键盘行为confirm-typedone \| next \| search \| send \| go选择提交或确认动作maxlengthnumber限制文本长度maxlinesnumber限制可见或可接受行数input-filterstring使用正则或原生过滤机制过滤可接受字符disabledboolean完全禁用交互readonlyboolean阻止编辑但行为不总是等同于disabledshow-soft-input-on-focusboolean控制获焦时是否弹出系统键盘confirm-enterbooleanconfirm 后保持 textarea 聚焦而非自动失焦avoid-keyboardboolean键盘遮挡时移动 Lynx 根节点或视图avoid-keyboard-spacingstring \| number增加额外的键盘避让间距Android 安全行为优先使用字符串单位hold-keyboardboolean在部分焦点切换中阻止键盘自动收起文本与占位符样式属性以下样式属性均支持 iOS、Android、Harmony 三端属性作用font-size控制基础文字大小font-weight/font-style/font-family控制文本字体外观placeholder-font-size/-x-placeholder-font-size控制占位符字号placeholder-font-weight/-x-placeholder-font-weight/placeholder-font-style/-x-placeholder-font-style/placeholder-font-family/-x-placeholder-font-family控制占位符字体外观color控制文本颜色placeholder-color/-x-placeholder-color控制占位符颜色caret-color控制光标颜色text-align控制水平对齐部分平台 / 平台专属属性属性平台作用enable-scroll-bariOS、Android显示内部垂直滚动条bounces仅 iOS开启/关闭 textarea 回弹效果line-spacingiOS、Android、Harmony调整行间距line-height仅 iOS调整行高不要假设 Android/Harmony 行为一致letter-spacingiOS、Android调整字符间距directioniOS、Android控制书写方向ios-auto-correct仅 iOS开关自动纠正ios-spell-check仅 iOS开关拼写检查ios-send-composing-input仅 iOS控制组合输入composing期间的更新是否保留在input载荷中android-fullscreen-mode仅 Android控制 IME 全屏提取模式android-set-soft-input-mode仅 Android请求宿主窗口软键盘调整模式事件模型事件载荷字段字段可用平台说明value全部当前文本值selectionStart全部选区起始位置未聚焦时通常为-1selectionEnd全部选区结束位置未聚焦时通常为-1isComposingiOS、Android、HarmonyiOS/Android 报告真实组合状态Harmony 当前恒报falseiOS 在ios-send-composing-input{false}时input事件会省略该字段cursor仅 iOSbeforeinput的替换起始索引length仅 iOSbeforeinput的替换长度replace仅 iOSbeforeinput的替换文本line全部当前行数iOS/Android 在编辑将超出maxlines时会发-1height全部键盘高度载荷show仅 iOS键盘可见性标志keyboardHeight仅 iOS键盘显示时的高度safeAreaBottom仅 iOS键盘显示时的 iOS 安全区 inset前端事件事件平台触发时机载荷要点input全部文本值变化value、selectionStart、selectionEnd通常还有isComposingline全部行数变化iOS/Android 还用它承载maxlines溢出信号lineselection全部选区变化selectionStart、selectionEndconfirm全部触发提交/确认动作而非普通换行路径valuefocus全部textarea 获得焦点valueblur全部textarea 失去焦点valuebeforeinput仅 iOS原生文本替换应用之前value、cursor、length、replace、isComposingkeyboardheightchange全部键盘高度变化heightkeyboard仅 iOSiOS 键盘显示/隐藏生命周期show显示时另含keyboardHeight、safeAreaBottom标准绑定语法textarea bindinput{handleInput} bindline{handleLine} bindconfirm{handleConfirm} bindfocus{handleFocus} bindblur{handleBlur} /UI 方法从调用链到源码实现文档定义了五种通过 selector query 或 node ref 调用的 UI 方法// 方式一createSelectorQuery lynx .createSelectorQuery() .select(#feedback) .invoke({ method: focus }) .exec(); // 方式二getNodeRef this.getNodeRef(#feedback).invoke({ method: setValue, params: { value: hello }, });方法参数备注focus无聚焦 textareablur无失焦 textareagetValue无返回value、selectionStart、selectionEnd、isComposingsetValuevalue: stringcursor?: numbercursor仅 iOS/Android 支持Harmony 不要依赖setSelectionRangeselectionStart: numberselectionEnd: number选区范围须在当前值长度之内从源码结构看上述方法在 UI 层由TextAreaNGView实现。clay/ui/component/editable/textarea_ng_view.cc 通过LYNX_UI_METHOD_BEGIN(TextAreaNGView)宏注册了setValue、getValue、blur、focus、setSelectionRange五个 UI method 入口各方法体如 setValue 实现直接委托给内部的EditableView处理这与文档中UI 方法只是转发到可编辑文本视图的行为模型相符。同时可观察到两个实现细节多行键盘动作构造函数中editable_view_-SetKeyboardAction(KeyboardAction::kMultiLine)textarea_ng_view.cc#L47即从 UI 层保证了textarea走多行键盘路径这正是它与单行input的本质区别光标保持在可视区内ScheduleCaretOnScreen()textarea_ng_view.cc#L128-L141在布局后计算 caret 矩形若光标位于当前可视区之外则调用ScrollTo滚动配合内部ScrollWrapper实现长文本编辑时的自动滚动。滚动容器在构造时被设置为OVERFLOW_HIDDEN即文本溢出时由内部滚动而非撑开外部布局。单元测试 clay/ui/component/editable/textarea_ng_view_unittests.cc 中对scroll、enableScrollBar、invalidEditingRanges等行为的覆盖也印证了文档中enable-scroll-bar属性与选区范围须合法这两条约束在实现层面是被显式保障的。常见实战模式带行数追踪的反馈框利用line -1检测maxlines溢出注意该信号仅适用于 iOS/Androidtextarea idfeedback placeholderWhat should we improve? maxlength{300} maxlines{6} bindline{(event) { const { line } event.detail; if (line -1) { console.log(maxlines overflow on iOS/Android); } }} /confirm 后保持焦点textarea placeholderAdd more details confirm-typedone confirm-enter{true} maxlines{4} /平台能力矩阵能力iOSAndroidHarmony多行编辑支持支持支持maxlines支持支持支持line事件支持支持支持line: -1溢出信号支持支持不支持beforeinput支持不支持不支持keyboardheightchange支持支持支持额外keyboard事件支持不支持不支持setValue({ cursor })支持支持不支持typepassword支持支持无本地映射enable-scroll-bar支持支持无本地处理bounces支持不支持无本地处理该矩阵是跨端代码的主要参考凡是标注不支持/无本地映射的能力都应有对应的降级或替换方案例如 Harmony 上密码输入改走非 textarea 方案。安全编码建议汇总文档最后给出的工程化建议Safe Guidance仅在真正需要多行输入时优先使用textarea显式设置maxlength不要依赖默认值在当前原生 iOStextarea上超限粘贴会被裁剪到剩余容量需要完整粘贴语义时应在前端自行处理line: -1只作为 iOS/Android 的溢出信号解读Harmony 的line语义不同不要依赖 Harmony 下typepassword的安全行为。配合本文的属性表、事件表和平台能力矩阵开发者可以在不依赖运行时试错的情况下为三端目标写出行为一致、边界明确的多行输入交互。【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Lynx textarea 元素跨平台实战：属性、事件与 UI 方法全解析
Lynx textarea 元素跨平台实战属性、事件与 UI 方法全解析【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx本文基于 Lynx 官方 API 文档技能库中的textarea元素指南ai/skills/lynx-api-docs/skills/using-lynx-api-docs/elements/textarea.md完整讲解原生 Android、iOS 与 Harmony 三端下textarea的使用时机选择、属性与事件模型、UI 方法调用方式并结合开源仓库中TextAreaNGView的源码实现帮助开发者掌握多行文本输入组件在三端的行为差异与工程化规避方案。适用场景与选型判断textarea是 Lynx 中的原生多行文本编辑元素。文档给出了明确的选型边界应该使用textarea的场景需要原生多行文本编辑器native multiline text editor内容会跨越多行需要行数统计或maxlines行数控制需要以编程方式控制焦点focus、失焦blur、取值value与选区selection多行输入域需要 submit / confirm 行为而不想退回到单行input的实现路径。不应使用textarea的场景需要真正的单行输入域——此时应选input例如值必须保持单行、回车键语义始终是单行确认、精确的单行键盘行为比多行编辑更重要时。需要跨平台一致的beforeinput事件——该事件目前仅在 iOS 上可用需要 Harmony 平台安全的密码型 textarea 行为——Harmony 下typepassword没有本地映射。跨平台护栏Guardrail速览——这是文档中最重要的四条行为约束直接决定三端代码写法Harmony 密码护栏如果 Harmony 在目标平台范围内不要依赖textarea的typepasswordiOSmaxlength护栏当粘贴文本长度超过剩余可输入容量时当前原生 iOStextarea会截断clip粘贴片段而不是完整接受剪贴板内容行数信号护栏line: -1仅应视为 iOS 或 Android 的maxlines溢出信号Harmony 的line字段报告的是当前行数键盘避让护栏Android 在目标范围内时avoid-keyboard-spacing应使用字符串单位如12px。快速上手基础多行 textareatextarea placeholderWrite your comment maxlength{200} maxlines{6} /带 confirm 与行数追踪的 textareatextarea idfeedback placeholderTell us what happened confirm-typedone maxlines{4} bindinput{handleInput} bindline{handleLine} bindconfirm{handleConfirm} /两个示例覆盖了最核心的三个属性maxlength限制文本长度maxlines限制可见/可接受行数confirm-type指定确认动作。类型定义文件 js_libraries/types/types/common/element/textarea.d.ts 中同样声明了maxlines?: number等属性与文档描述一致。属性详解核心属性属性类型作用placeholderstring设置占位文本typetext \| number \| digit \| tel \| email选择 textarea 输入类型与键盘行为confirm-typedone \| next \| search \| send \| go选择提交或确认动作maxlengthnumber限制文本长度maxlinesnumber限制可见或可接受行数input-filterstring使用正则或原生过滤机制过滤可接受字符disabledboolean完全禁用交互readonlyboolean阻止编辑但行为不总是等同于disabledshow-soft-input-on-focusboolean控制获焦时是否弹出系统键盘confirm-enterbooleanconfirm 后保持 textarea 聚焦而非自动失焦avoid-keyboardboolean键盘遮挡时移动 Lynx 根节点或视图avoid-keyboard-spacingstring \| number增加额外的键盘避让间距Android 安全行为优先使用字符串单位hold-keyboardboolean在部分焦点切换中阻止键盘自动收起文本与占位符样式属性以下样式属性均支持 iOS、Android、Harmony 三端属性作用font-size控制基础文字大小font-weight/font-style/font-family控制文本字体外观placeholder-font-size/-x-placeholder-font-size控制占位符字号placeholder-font-weight/-x-placeholder-font-weight/placeholder-font-style/-x-placeholder-font-style/placeholder-font-family/-x-placeholder-font-family控制占位符字体外观color控制文本颜色placeholder-color/-x-placeholder-color控制占位符颜色caret-color控制光标颜色text-align控制水平对齐部分平台 / 平台专属属性属性平台作用enable-scroll-bariOS、Android显示内部垂直滚动条bounces仅 iOS开启/关闭 textarea 回弹效果line-spacingiOS、Android、Harmony调整行间距line-height仅 iOS调整行高不要假设 Android/Harmony 行为一致letter-spacingiOS、Android调整字符间距directioniOS、Android控制书写方向ios-auto-correct仅 iOS开关自动纠正ios-spell-check仅 iOS开关拼写检查ios-send-composing-input仅 iOS控制组合输入composing期间的更新是否保留在input载荷中android-fullscreen-mode仅 Android控制 IME 全屏提取模式android-set-soft-input-mode仅 Android请求宿主窗口软键盘调整模式事件模型事件载荷字段字段可用平台说明value全部当前文本值selectionStart全部选区起始位置未聚焦时通常为-1selectionEnd全部选区结束位置未聚焦时通常为-1isComposingiOS、Android、HarmonyiOS/Android 报告真实组合状态Harmony 当前恒报falseiOS 在ios-send-composing-input{false}时input事件会省略该字段cursor仅 iOSbeforeinput的替换起始索引length仅 iOSbeforeinput的替换长度replace仅 iOSbeforeinput的替换文本line全部当前行数iOS/Android 在编辑将超出maxlines时会发-1height全部键盘高度载荷show仅 iOS键盘可见性标志keyboardHeight仅 iOS键盘显示时的高度safeAreaBottom仅 iOS键盘显示时的 iOS 安全区 inset前端事件事件平台触发时机载荷要点input全部文本值变化value、selectionStart、selectionEnd通常还有isComposingline全部行数变化iOS/Android 还用它承载maxlines溢出信号lineselection全部选区变化selectionStart、selectionEndconfirm全部触发提交/确认动作而非普通换行路径valuefocus全部textarea 获得焦点valueblur全部textarea 失去焦点valuebeforeinput仅 iOS原生文本替换应用之前value、cursor、length、replace、isComposingkeyboardheightchange全部键盘高度变化heightkeyboard仅 iOSiOS 键盘显示/隐藏生命周期show显示时另含keyboardHeight、safeAreaBottom标准绑定语法textarea bindinput{handleInput} bindline{handleLine} bindconfirm{handleConfirm} bindfocus{handleFocus} bindblur{handleBlur} /UI 方法从调用链到源码实现文档定义了五种通过 selector query 或 node ref 调用的 UI 方法// 方式一createSelectorQuery lynx .createSelectorQuery() .select(#feedback) .invoke({ method: focus }) .exec(); // 方式二getNodeRef this.getNodeRef(#feedback).invoke({ method: setValue, params: { value: hello }, });方法参数备注focus无聚焦 textareablur无失焦 textareagetValue无返回value、selectionStart、selectionEnd、isComposingsetValuevalue: stringcursor?: numbercursor仅 iOS/Android 支持Harmony 不要依赖setSelectionRangeselectionStart: numberselectionEnd: number选区范围须在当前值长度之内从源码结构看上述方法在 UI 层由TextAreaNGView实现。clay/ui/component/editable/textarea_ng_view.cc 通过LYNX_UI_METHOD_BEGIN(TextAreaNGView)宏注册了setValue、getValue、blur、focus、setSelectionRange五个 UI method 入口各方法体如 setValue 实现直接委托给内部的EditableView处理这与文档中UI 方法只是转发到可编辑文本视图的行为模型相符。同时可观察到两个实现细节多行键盘动作构造函数中editable_view_-SetKeyboardAction(KeyboardAction::kMultiLine)textarea_ng_view.cc#L47即从 UI 层保证了textarea走多行键盘路径这正是它与单行input的本质区别光标保持在可视区内ScheduleCaretOnScreen()textarea_ng_view.cc#L128-L141在布局后计算 caret 矩形若光标位于当前可视区之外则调用ScrollTo滚动配合内部ScrollWrapper实现长文本编辑时的自动滚动。滚动容器在构造时被设置为OVERFLOW_HIDDEN即文本溢出时由内部滚动而非撑开外部布局。单元测试 clay/ui/component/editable/textarea_ng_view_unittests.cc 中对scroll、enableScrollBar、invalidEditingRanges等行为的覆盖也印证了文档中enable-scroll-bar属性与选区范围须合法这两条约束在实现层面是被显式保障的。常见实战模式带行数追踪的反馈框利用line -1检测maxlines溢出注意该信号仅适用于 iOS/Androidtextarea idfeedback placeholderWhat should we improve? maxlength{300} maxlines{6} bindline{(event) { const { line } event.detail; if (line -1) { console.log(maxlines overflow on iOS/Android); } }} /confirm 后保持焦点textarea placeholderAdd more details confirm-typedone confirm-enter{true} maxlines{4} /平台能力矩阵能力iOSAndroidHarmony多行编辑支持支持支持maxlines支持支持支持line事件支持支持支持line: -1溢出信号支持支持不支持beforeinput支持不支持不支持keyboardheightchange支持支持支持额外keyboard事件支持不支持不支持setValue({ cursor })支持支持不支持typepassword支持支持无本地映射enable-scroll-bar支持支持无本地处理bounces支持不支持无本地处理该矩阵是跨端代码的主要参考凡是标注不支持/无本地映射的能力都应有对应的降级或替换方案例如 Harmony 上密码输入改走非 textarea 方案。安全编码建议汇总文档最后给出的工程化建议Safe Guidance仅在真正需要多行输入时优先使用textarea显式设置maxlength不要依赖默认值在当前原生 iOStextarea上超限粘贴会被裁剪到剩余容量需要完整粘贴语义时应在前端自行处理line: -1只作为 iOS/Android 的溢出信号解读Harmony 的line语义不同不要依赖 Harmony 下typepassword的安全行为。配合本文的属性表、事件表和平台能力矩阵开发者可以在不依赖运行时试错的情况下为三端目标写出行为一致、边界明确的多行输入交互。【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
