Skip to main content
Version: 3.x

Textarea

Multi-line input box. This component is a Native Component. Note related limits before use.

Reference

Type

ComponentType<TextareaProps>

Examples

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>
)
}
}

TextareaProps

PropertyTypeDefaultRequiredDescription
valuestringYesThe content in the input box
placeholderstringNoThe placeholder used when the input box is empty
placeholderStylestringNoSpecifies the style of the placeholder.
placeholderClassstring"textarea-placeholder"NoSpecifies the style class of the placeholder.
disabledbooleanfalseNoSpecifies whether to disable the component.
maxlengthnumber140NoThe maximum length. When it is set to "-1", the maximum length is not limited.
autoFocusbooleanfalseNoAuto focus. The keyboard is automatically displayed.
focusbooleanfalseNoGets focus
autoHeightbooleanfalseNoSpecifies whether the height automatically increases. If this property is specified, style.height does not take effect.
fixedbooleanfalseNoIf the textarea is in an area of position:fixed, the value of the specified property should always be true.
cursorSpacingnumber0NoSpecifies 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.
cursornumber-1NoSpecifies the cursor position during focusing.
showConfirmBarbooleantrueNoSpecifies whether to display the bar containing the Done button above the keyboard
selectionStartnumber-1NoThe start position of the cursor. It takes effect only during auto focusing, and needs to used with selectionEnd.
selectionEndnumber-1NoThe end position of the cursor. It takes effect only during auto focusing, and needs to used with selectionStart.
adjustPositionbooleantrueNoSpecifies whether to automatically push up the page when the keyboard is displayed
holdKeyboardbooleanfalseNoSpecifies whether to hide the keyboard when the page is clicked when focused
disableDefaultPaddingbooleanfalseNoSpecifies whether to remove the default inner margins under iOS
onFocusBaseEventOrigFunction<onFocusEventDetail>NoTriggered when the input box is focused. event.detail = {value, height}, where height is the height of the keyboard.
onBlurBaseEventOrigFunction<onBlurEventDetail>NoTriggered when the input box is unfocused.
onLineChangeBaseEventOrigFunction<onLineChangeEventDetail>NoCalled when the number of lines in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0}
onInputBaseEventOrigFunction<onInputEventDetail>NoAn 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.
onConfirmBaseEventOrigFunction<onConfirmEventDetail>NoA confirm event triggered when the Done button is tapped, event.detail = {value: value}
onKeyboardHeightChangeBaseEventOrigFunction<onKeyboardHeightChangeEventDetail>NoTriggered when the height of the keyboard changes.

Property Support

PropertyWeChat Mini-ProgramH5React 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

ParamTypeDescription
valuestringinput value
heightnumberKeyboard height

onBlurEventDetail

ParamTypeDescription
valuestringinput value
cursornumbercursor position

onLineChangeEventDetail

ParamType
heightnumber
heightRpxnumber
lineCountnumber

onInputEventDetail

ParamTypeDescription
valuestringinput value
cursornumbercursor position
keyCodenumberkey code

onConfirmEventDetail

ParamTypeDescription
valuestringinput value

onKeyboardHeightChangeEventDetail

ParamTypeDescription
heightnumberKeyboard height
durationnumberDuration

API Support

APIWeChat Mini-ProgramH5React Native
Textarea✔️✔️✔️