Version: next

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

参数类型默认值必填说明
value
string
输入框的内容
placeholder
string
输入框为空时占位符
placeholderStyle
string
指定 placeholder 的样式
placeholderClass
string
"textarea-placeholder"
指定 placeholder 的样式类
disabled
boolean
false
是否禁用
maxlength
number
140
最大输入长度,设置为 -1 的时候不限制最大长度
autoFocus
boolean
false
自动聚焦,拉起键盘
focus
boolean
false
获取焦点
autoHeight
boolean
false
是否自动增高,设置 autoHeight 时,style.height不生效
fixed
boolean
false
如果 Textarea 是在一个
position:fixed
的区域,需要显示指定属性 fixed 为 true
cursorSpacing
number
0
指定光标与键盘的距离,单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离
cursor
number
-1
指定 focus 时的光标位置
showConfirmBar
boolean
true
是否显示键盘上方带有”完成“按钮那一栏
selectionStart
number
-1
光标起始位置,自动聚集时有效,需与 selectionEnd 搭配使用
selectionEnd
number
-1
光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用
adjustPosition
boolean
true
键盘弹起时,是否自动上推页面
holdKeyboard
boolean
false
focus 时,点击页面的时候不收起键盘
disableDefaultPadding
boolean
false
是否去掉 iOS 下的默认内边距
onFocus
BaseEventOrigFunction<onFocusEventDetail>
输入框聚焦时触发
onBlur
BaseEventOrigFunction<onBlurEventDetail>
输入框失去焦点时触发
onLineChange
BaseEventOrigFunction<onLineChangeEventDetail>
输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
onInput
BaseEventOrigFunction<onInputEventDetail>
当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode}

onInput 处理函数的返回值并不会反映到 textarea 上
onConfirm
BaseEventOrigFunction<onConfirmEventDetail>
点击完成时, 触发 confirm 事件,event.detail = {value: value}
onKeyboardHeightChange
BaseEventOrigFunction<onKeyboardHeightChangeEventDetail>
键盘高度发生变化的时候触发此事件

API 支持度

API微信小程序H5React Native
TextareaProps.value✔️✔️✔️
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.onFocus✔️✔️✔️
TextareaProps.onBlur✔️✔️✔️
TextareaProps.onLineChange✔️✔️
TextareaProps.onInput✔️✔️✔️
TextareaProps.onConfirm✔️✔️
TextareaProps.onKeyboardHeightChange✔️

onFocusEventDetail

参数类型说明
value
string
输入值
height
number
键盘高度

onBlurEventDetail

参数类型说明
value
string
输入值
cursor
number
光标位置

onLineChangeEventDetail

参数类型
height
number
heightRpx
number
lineCount
number

onInputEventDetail

参数类型说明
value
string
输入值
cursor
number
光标位置
keyCode
number
键值

onConfirmEventDetail

参数类型说明
value
string
输入值

onKeyboardHeightChangeEventDetail

参数类型说明
height
number
键盘高度
duration
number
持续时间

API 支持度

API微信小程序H5React Native
Textarea✔️✔️✔️