跳到主要内容
版本:4.x

Textarea

多行输入框。该组件是原生组件,使用时请注意相关限制

支持情况:

参考文档

类型

ComponentType<TextareaProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Text>输入区域高度自适应,不会出现滚动条</Text>
<Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
<Text>这是一个可以自动聚焦的 textarea</Text>
<Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
</View>
)
}
}

TextareaProps

参数类型默认值必填说明
valuestring输入框的内容
defaultValuestring设置 React 非受控输入框的初始内容
placeholderstring输入框为空时占位符
placeholderStylestring指定 placeholder 的样式
placeholderClassstring"textarea-placeholder"指定 placeholder 的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度
autoFocusbooleanfalse自动聚焦,拉起键盘
focusbooleanfalse获取焦点
autoHeightbooleanfalse是否自动增高,设置 autoHeight 时,style.height不生效
fixedbooleanfalse如果 Textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
cursorSpacingnumber0指定光标与键盘的距离,单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离
cursornumber-1指定 focus 时的光标位置
showConfirmBarbooleantrue是否显示键盘上方带有”完成“按钮那一栏
selectionStartnumber-1光标起始位置,自动聚集时有效,需与 selectionEnd 搭配使用
selectionEndnumber-1光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用
adjustPositionbooleantrue键盘弹起时,是否自动上推页面
holdKeyboardbooleanfalsefocus 时,点击页面的时候不收起键盘
disableDefaultPaddingbooleanfalse是否去掉 iOS 下的默认内边距
nativePropsRecord<string, unknown>用于透传 WebComponents 上的属性到内部 H5 标签上
confirmType"send" or "search" or "next" or "go" or "done" or "return"设置键盘右下角按钮的文字
confirmHoldboolean点击键盘右下角按钮时是否保持键盘不收起
namestring组件名字,用于表单提交获取数据。
showCountbooleantrue是否渲染字数统计功能(是否删除默认计数器/是否显示字数统计)。
controlledbooleanfalse是否为受控组件。为 true 时,value 内容会完全受 setData 控制。
ariaLabelstring无障碍访问,(属性)元素的额外描述
adjustKeyboardTobooleanfalse键盘对齐位置
onFocusCommonEventFunction<onFocusEventDetail>输入框聚焦时触发
onBlurCommonEventFunction<onBlurEventDetail>输入框失去焦点时触发
onLineChangeCommonEventFunction<onLineChangeEventDetail>输入框行数变化时调用
onInputCommonEventFunction<onInputEventDetail>当键盘输入时,触发 input 事件

onInput 处理函数的返回值并不会反映到 textarea 上
onConfirmCommonEventFunction<onConfirmEventDetail>点击完成时, 触发 confirm 事件
onKeyboardHeightChangeCommonEventFunction<onKeyboardHeightChangeEventDetail>键盘高度发生变化的时候触发此事件

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
TextareaProps.value✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.defaultValue✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.placeholder✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.placeholderStyle✔️✔️✔️✔️✔️✔️
TextareaProps.placeholderClass✔️✔️✔️✔️✔️✔️
TextareaProps.disabled✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.maxlength✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.autoFocus✔️✔️✔️✔️✔️✔️
TextareaProps.focus✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.autoHeight✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.fixed✔️✔️✔️✔️
TextareaProps.cursorSpacing✔️✔️✔️✔️✔️
TextareaProps.cursor✔️✔️✔️✔️✔️
TextareaProps.showConfirmBar✔️✔️✔️✔️✔️
TextareaProps.selectionStart✔️✔️✔️✔️✔️✔️
TextareaProps.selectionEnd✔️✔️✔️✔️✔️✔️
TextareaProps.adjustPosition✔️✔️✔️✔️✔️
TextareaProps.holdKeyboard✔️✔️
TextareaProps.disableDefaultPadding✔️✔️
TextareaProps.nativeProps✔️✔️
TextareaProps.confirmType✔️✔️✔️✔️
TextareaProps.confirmHold✔️✔️✔️
TextareaProps.name✔️
TextareaProps.showCount✔️
TextareaProps.controlled✔️
TextareaProps.ariaLabel✔️
TextareaProps.adjustKeyboardTo✔️
TextareaProps.onFocus✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.onBlur✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.onLineChange✔️✔️✔️✔️✔️✔️
TextareaProps.onInput✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.onConfirm✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextareaProps.onKeyboardHeightChange✔️✔️

onFocusEventDetail

参数类型说明
valuestring输入值
heightnumber键盘高度

onBlurEventDetail

参数类型说明
valuestring输入值
cursornumber光标位置

onLineChangeEventDetail

参数类型
heightnumber
heightRpxnumber
lineCountnumber

onInputEventDetail

参数类型说明
valuestring输入值
cursornumber光标位置
keyCodenumber键值

onConfirmEventDetail

参数类型说明
valuestring输入值

onKeyboardHeightChangeEventDetail

参数类型说明
heightnumber键盘高度
durationnumber持续时间