textarea

Represents a multi-line text input component.

Since: 1.0.0

Constraints

If the component does not have its width set, it stretches to fill the maximum available width.
Text content will wrap automatically when exceeding the component's width.
If the component does not have its height set, it has no default height and dynamically adjusts its height to fit the content.

Properties

Name	Type	Default Value	Mandatory	Description
value	string	-	No	Initial content of the input box.
confirm-type	string	return	No	Text displayed on the bottom-right button of the input method keyboard when textarea is tapped to bring up the keyboard. Valid values: send: The text on the bottom-right button of the keyboard is Send. search: The text on the bottom-right button of the keyboard is Search. next: The text on the bottom-right button of the keyboard is Next. go: The text on the bottom-right button of the keyboard is Go. done: The text on the bottom-right button of the keyboard is Done. return: The text on the bottom-right button of the keyboard is Return.
placeholder	string	-	No	Placeholder when the input box is empty.
focus	boolean	false	No	Whether the input box has the focus. Since: 1.0.5
placeholder-style	string	-	No	Style of the placeholder. Currently, only color, font-size, and font-weight can be set.
disabled	boolean	false	No	Disabled or not.
maxlength	number	140	No	Maximum input length (-1: no limitation on length).
auto-height	boolean	false	No	Whether to automatically increase the height. When auto-height is set, style.height does not take effect.
bindinput	eventhandle	-	No	Event handler triggered upon keyboard input, with event.detail = {value}.
bindfocus	eventhandle	-	No	Event handler triggered when the input box gains focus.
bindblur	eventhandle	-	No	Event handler triggered when the input box loses focus.
bindconfirm	eventhandle	-	No	Event handler triggered when the Done button is pressed.

Example

HXML file:

<view class="page-section">
  <view class="textarea-wrp">
    <textarea
      bindblur="bindTextAreaBlur"
      confirm-type="go"
      maxlength="{{140}}"
      auto-height="{{true}}"
    />
  </view>
</view>
<view class="page-section">
  <view class="page-section-title">placeholder is red</view>
  <view class="textarea-wrp">
    <textarea
      placeholder="placeholder is red"
      placeholder-style="color:red;font-size:20;font-weight:200"
    />
  </view>
</view>

JS code:

Page({
  data: {
  },
  bindTextAreaBlur(e) {
    console.log(e.detail.value)
  },
})

目录

textarea

Constraints

Properties

Example