Skip to content

n-textarea 多行输入框 ​

view 为根装配 边框 / 字数统计区 / 下划线与禁用拦截层,内部嵌原生 textarea 承接输入,外观与 n-input 同一套(内边距、圆角、字号、禁用透明度共用 --n-input-* 令牌)。组件根不是原生 textarea,v-model 由组件的双事件通道承接(update:modelValue 与 input 同参同发,库内受控组件统一模式):

html
<n-textarea v-model="val" />
  1. 值类型统一为 string,换行以 \n 存于值内
  2. 默认宽度 100% 撑满所在容器;高度由 height 控制(默认 100px);auto-height 开启后高度完全交给内容(原生接管,height 不再生效——平台原生行为)
  3. 字数统计是独立行贴在输入区下方右对齐(不悬浮在文字上,不盖最后一行字);仅 maxlength > 0 时生效
  4. 禁用不只是视觉:保色相降透明 + 透明拦截层盖住输入区,焦点与键入全部拦下,事件一律不触发
  5. 输入文字与占位符颜色由组件按深浅主题自动切换(App 端原生 textarea 的 class 色引用 CSS 变量不可靠,组件改为行内直达固定色值);color 可覆盖为任意固定色
  6. 页面建议(App 端):在 pages.json 对应页面的 style 里配 "app-plus": { "softinputMode": "adjustResize" }——键盘直接压缩窗口高度,任何位置的输入框都完整可见(组件无法替页面设置此项,需页面自行配置)
  7. 键盘默认只出键盘本体——确认/换行就在键盘右下角(小程序端也不出键盘上方的“完成”工具栏);需要那一栏时置 show-confirm-bar

平台兼容性 ​

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ × × × ×

API ​

属性 ​

参数 说明 类型 默认值 可选值
model-value 输入框的值,换行以 \n 存于值内;支持 v-model(update:modelValue 与 input 同参同发),也可 :model-value + @input 手动绑定 String "" -
placeholder 占位提示文字;留空时用内置多语言文案(简体中文"请输入内容") String "" -
placeholder-style 占位提示文字的行内样式,颜色默认跟随主题由组件下发 String "" 与 css 相同
maxlength 最大输入长度,-1 为不限制 Number 140 -
show-word-limit 显示字数统计(底部右对齐 n/max 形式;仅 maxlength > 0 时生效) Boolean false -
auto-height 自动增高:开启后输入区高度完全由内容决定(原生接管,height 不再生效——平台原生行为);适合聊天框、动态表单等不定长录入 Boolean false -
height 输入区高度(px,不含边框与内边距);auto-height 开启时不生效(高度交给内容) Number 100 -
size 字号档位(16 / 15 / 13px,与 n-input 同源令牌);高度由 height 独立控制,两者正交 String normal large<br/>normal<br/>small
border 边框形态:surround 全边框 / bottom 下划线(聚焦时线变品牌色) / none 无边框(无边框时融入所在背景,适合内嵌表单卡片) String surround surround<br/>bottom<br/>none
disabled 禁用(保色相降透明;透明拦截层盖住输入区拦截焦点与键入,事件一律不触发) Boolean false -
focus 自动获取焦点(置 true 聚焦;置回 false 不会主动收起键盘) Boolean false -
cursor 指定聚焦时的光标位置(-1 不指定,由原生放在末尾;仅在聚焦瞬间生效,聚焦后修改无效) Number -1 -
selection-start 聚焦时选区起始位置(-1 不启用选区;需与 selection-end 搭配使用,仅在聚焦瞬间生效) Number -1 -
selection-end 聚焦时选区结束位置(-1 不启用选区;需与 selection-start 搭配使用,仅在聚焦瞬间生效) Number -1 -
hold-keyboard 聚焦时点击页面不收起键盘(聊天页点击消息列表、弹层内输入等防误触收起场景) Boolean false -
adjust-keyboard-to 微信键盘对齐 cursor 光标 / bottom 输入框底部;其他平台不绑定 String "cursor" cursor / bottom
fixed 微信中位于 position:fixed 容器时必须开启;其他平台不绑定 Boolean false -
disable-default-padding 移除微信 iOS 原生默认内边距 Boolean true -
color 输入文字颜色(留空随深浅主题自动切换;以行内样式直达,不受 App 端 textarea 类色变量不可靠问题影响) String "" 与 css 相同
confirm-type 键盘确认键(右下角按钮)文字;默认 return 换行键——按下插入换行(多行输入主语义,真机键盘与开发者工具物理回车同源);改动作键则不插入换行、触发 confirm(done 同时收起键盘) String return return<br/>send<br/>search<br/>next<br/>go<br/>done
confirm-hold 点击确认键后保持键盘不收起(聊天、逐条录入等连续输入场景开启) Boolean false -
show-confirm-bar 键盘上方带“完成”按钮的工具栏(仅小程序端有此栏,App/H5 键盘本体自带确认键、本属性无效果);默认不出,确认/换行在键盘右下角本体上 Boolean false -
adjust-position 键盘弹起时是否自动上推页面(原生避让机制,输入框在文档流内即可零配置避让)。仅特殊场景(自建聊天栏等自行处理避让)才需要关闭 Boolean true -
cursor-spacing 光标与键盘保持的距离(px):键盘弹起时原生上推量按此值计算;默认 20 保证整个输入框露出键盘上沿(原生默认 0 只保证光标线) Number 20 -
textarea-style 微调原生 textarea 的行内样式,如 "font-size:16px;letter-spacing:1px" String "" 与 css 相同
custom-class 挂到根节点的额外 class(类需定义在组件样式表内) String "" -
custom-style 根节点行内样式 String "" 与 css 相同

事件 ​

事件名 说明 回调参数
update:modelValue 与 input 同参同发,v-model 绑定通道 最新值(String)
input 每次键入或删除时实时触发(含换行符;手动受控主通道:在回调里同步使用侧状态) 最新值(String)
change 输入内容有变化且失焦时触发(与聚焦时的值比较,无变化不触发) 最终值(String)
focus 输入框获得焦点时触发(禁用态不触发) 事件对象
blur 输入框失去焦点时触发(禁用态不触发;change 在本事件之前发出) 事件对象
confirm 点击键盘确认键(右下角动作键)时触发(默认 return 换行键按下是插入换行、不触发本事件;改 done/send 等动作键后才触发) 事件对象
linechange 输入框行数(内容高度)变化时触发,auto-height 增高场景可监听 事件对象(detail.height / heightRpx / lineCount)
keyboardheightchange 键盘高度变化时触发(弹起/收起均发,height 为最新高度,收起为 0) 事件对象(detail.height 为键盘高度)

插槽 ​

无。

记录 · 思考 · 创作