Textarea

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

Reference

Type

ComponentType<TextareaProps>

Examples

React

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

Vue

<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	✔️	✔️	✔️