Textarea
Multi-line input box. This component is a Native Component. Note related limits before use.
Type
ComponentType<TextareaProps>
Examples
- React
- Vue
export default class PageView extends Component {
constructor() {
super(...arguments)
}
render() {
return (
<View className='components-page'>
<Text>Height-adaptive input area with no scroll bars</Text>
<Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
<Text>This is a textarea that can be autofocused</Text>
<Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
</View>
)
}
}
<template>
<view class="components-page">
<text>Height-adaptive input area with no scroll bars</text>
<textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
<text>This is a textarea that can be autofocused</text>
<textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
</view>
</template>
TextareaProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
value | string | Yes | The content in the input box | |
placeholder | string | No | The placeholder used when the input box is empty | |
placeholderStyle | string | No | Specifies the style of the placeholder. | |
placeholderClass | string | "textarea-placeholder" | No | Specifies the style class of the placeholder. |
disabled | boolean | false | No | Specifies whether to disable the component. |
maxlength | number | 140 | No | The maximum length. When it is set to "-1", the maximum length is not limited. |
autoFocus | boolean | false | No | Auto focus. The keyboard is automatically displayed. |
focus | boolean | false | No | Gets focus |
autoHeight | boolean | false | No | Specifies whether the height automatically increases. If this property is specified, style.height does not take effect. |
fixed | boolean | false | No | If the textarea is in an area of position:fixed , the value of the specified property should always be true. |
cursorSpacing | number | 0 | No | Specifies the distance between the cursor and the keyboard. It is either the distance between textarea and the bottom of the screen or the distance specified via cursor-spacing, whichever is smaller. |
cursor | number | -1 | No | Specifies the cursor position during focusing. |
showConfirmBar | boolean | true | No | Specifies whether to display the bar containing the Done button above the keyboard |
selectionStart | number | -1 | No | The start position of the cursor. It takes effect only during auto focusing, and needs to used with selectionEnd. |
selectionEnd | number | -1 | No | The end position of the cursor. It takes effect only during auto focusing, and needs to used with selectionStart. |
adjustPosition | boolean | true | No | Specifies whether to automatically push up the page when the keyboard is displayed |
holdKeyboard | boolean | false | No | Specifies whether to hide the keyboard when the page is clicked when focused |
disableDefaultPadding | boolean | false | No | Specifies whether to remove the default inner margins under iOS |
onFocus | BaseEventOrigFunction<onFocusEventDetail> | No | Triggered when the input box is focused. event.detail = {value, height}, where height is the height of the keyboard. | |
onBlur | BaseEventOrigFunction<onBlurEventDetail> | No | Triggered when the input box is unfocused. | |
onLineChange | BaseEventOrigFunction<onLineChangeEventDetail> | No | Called when the number of lines in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0} | |
onInput | BaseEventOrigFunction<onInputEventDetail> | No | An input event triggered when anything is input via the keyboard, event.detail = {value, cursor, keyCode} Return values of the bindinput processing function will not be reflected on textarea. | |
onConfirm | BaseEventOrigFunction<onConfirmEventDetail> | No | A confirm event triggered when the Done button is tapped, event.detail = {value: value} | |
onKeyboardHeightChange | BaseEventOrigFunction<onKeyboardHeightChangeEventDetail> | No | Triggered when the height of the keyboard changes. |
Property Support
Property | WeChat Mini-Program | H5 | React 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
Param | Type | Description |
---|---|---|
value | string | input value |
height | number | Keyboard height |
onBlurEventDetail
Param | Type | Description |
---|---|---|
value | string | input value |
cursor | number | cursor position |
onLineChangeEventDetail
Param | Type |
---|---|
height | number |
heightRpx | number |
lineCount | number |
onInputEventDetail
Param | Type | Description |
---|---|---|
value | string | input value |
cursor | number | cursor position |
keyCode | number | key code |
onConfirmEventDetail
Param | Type | Description |
---|---|---|
value | string | input value |
onKeyboardHeightChangeEventDetail
Param | Type | Description |
---|---|---|
height | number | Keyboard height |
duration | number | Duration |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
Textarea | ✔️ | ✔️ | ✔️ |