All Products
Search
Document Center

Mobile Platform as a Service:textarea

Last Updated:Jul 27, 2023

This topic describes textarea, the multi-line entry box.

Attribute

Type

Default value

Description

Minimum version

name

String

-

The component name, which is used to submit the form to obtain data.

-

value

String

-

Initial content

-

placeholder

String

-

The placeholder.

-

placeholder-style

String

-

The specified placeholder style.

1.6.0

placeholder-class

String

-

The specified placeholder style class.

1.6.0

disabled

Boolean

false

Whether to disable the button.

-

maxlength

Number

140

The maximum length. When the value is 1, the maximum length is not limited.

-

focus

Boolean

false

Obtain the focus.

-

auto-height

Boolean

false

Whether to increase the height automatically.

-

show-count

Boolean

true

Whether to render the word count function.

1.8.0

controlled

Boolean

false

Whether the component is a controlled component. If the value is true, the content of value is fully controlled by setData.

1.8.0

onInput

EventHandle

-

Trigger when a keyboard entry occurs, where event.detail = {value: value}. You can directly return a string to replace the content of the entry box.

-

onFocus

EventHandle

-

Trigger when the entry box is focused, where event.detail = {value: value}.

-

onBlur

EventHandle

-

Trigger when the entry box is not focused, where event.detail = {value: value}.

-

onConfirm

EventHandle

-

Trigger when the clicking action is completed, where event.detail = {value: value}.

-

Code sample

<view class="section">
  <textarea onBlur="bindTextAreaBlur" auto-height placeholder="Increase the height automatically" />
</view>
<view class="section">
  <textarea placeholder="Focus this only when the button is clicked" focus="{{focus}}" />
  <view class="btn-area">
    <button onTap="bindButtonTap">Make the entry box to be focused.</button>
  </view>
</view>
<view class="section">
  <form onSubmit="bindFormSubmit">
    <textarea placeholder="textarea in the form" name="textarea"/>
    <button form-type="submit"> Submit </button>
  </form>
</view>
Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit: function(e) {
    console.log(e.detail.value.textarea)
  }
})

Handle interaction exceptions between the iOS keyboard and components

For components that need to start the keyboard, such as input and textarea, the native keyboard is currently used by default. If interaction exceptions occur between the keyboard and a component, you can add the enableNative="{{false}}" attribute to the component to restore to the keyboard that uses WKWebview, as shown in the following code. Meanwhile, since the system keyboard is used, the Native keyboard-related functions provided by mPaaS cannot be used. Currently, no special adaptation is available for keyboard-related exceptions. For interaction exceptions, use this method to handle them.

<textarea value="{{inputValue}}" enableNative="{{false}}" maxlength="500" onInput="onInput" />