Textarea - 《Taro 文档帮助手册教程》

sidebar_label: Textarea
Type
Examples
TextareaProps
API Support

title: Textarea

sidebar_label: Textarea

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

Reference

Type

ComponentType<TextareaProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

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

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