textarea 多行文本输入框

更新时间：2025-08-19 11:44:25

基础库1.1.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

多行输入框。该组件是原生组件，样式和行为和 HTML 有所差异，不允许嵌套其他组件。

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
value	string	''	否	输入框的内容
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
disabled	boolean	false	否	是否禁用
placeholder	string	''	否	输入框为空时占位符
placeholder-style	string	''	否	指定 placeholder 的样式，目前仅支持 color , font-size 和 font-weight
auto-focus	boolean	false	否	自动聚焦，拉起键盘。
focus	boolean	false	否	获取焦点
fixed	boolean	false	否	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
cursor-color	string	'#FE3666'	否	光标默认色, 目前支持hex颜色码
auto-height	boolean	false	否	是否自动增高，设置 auto-height 时，style.height 不生效
confirm-type	'search' | 'send' | 'next' | 'go' | 'done' | 'return'	'return'	否	设置键盘右下角按钮的文字
bindfocus	(e: { detail: { value: string, height: number } } & Event) => void		否	输入框聚焦时触发，event.detail = {}
bindblur	(e: { detail: { value: string, cursor: number } } & Event) => void		否	输入框失去焦点时触发，event.detail = {value}
bindinput	(e: { detail: { value: string, cursor: number, keyCode: number } } & Event) => void		否	当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值，目前工具还不支持返回 keyCode 参数。bindinput 处理函数的返回值并不会反映到 textarea 上

confirmType

设置键盘右下角按钮的文字

值	说明
'search'	右下角按钮为“搜索”
'send'	右下角按钮为“发送”
'next'	右下角按钮为“下一个”
'go'	右下角按钮为“前往”
'done'	右下角按钮为“完成”
'return'	右下角按钮为“换行”

Bug & Tip

1. tip: textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
2. tip: 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
3. tip: 键盘高度发生变化，keyboardheightchange 事件可能会多次触发，开发者对于相同的 height 值应该忽略掉
4. tip: 存在属性与控制限制 (opens new window)
5. tip: 请注意原生组件使用限制 (opens new window)

扫码体验

示例代码