WeChat Open Platform

Mini Programs Documentation

textarea

Multi-row input box

Attribute name Type Default value Description
value String Input box content
placeholder String Placeholder when input box is empty
placeholder-style String Specified placeholder style
placeholder-class String textarea-placeholder Specified placeholder style type
disabled Boolean false Whether disabled
maxlength Number 140 Maximum input length, maximum length not restricted when set as -1
auto-focus Boolean false Automatic focus, pull keyboard up
focus Boolean false Gets focus
auto-height Boolean false Whether to increase height automatically, style.height is ineffective when auto-height set
fixed Boolean false If textarea is in a position:fixed area, the specified attribute fixed needs to be displayed as true
cursor-spacing Number 0 Specified distance between cursor and keyboard, unit px. The minimum value obtained for the distance between the textarea and the bottom and the specified cursor-spacing distance serves as the distance between cursor and keyboard.
bindfocus EventHandle Triggered during input box focus, event.detail = {value: value}
bindblur EventHandle Triggered when input box loses focus, event.detail = {value: value}
bindlinechange EventHandle Called when the number of input box rows changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle input event triggered during keyboard input, event.detail = {value: value}, the return value of the bindinput processing function will not be reflected on the textarea
bindconfirm EventHandle A confirm event is triggered when Done is tapped, event.detail = {value: value}

Sample code:

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
  <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="This is a textarea that can be automatically focused" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">Make input box get focus</button>
  </view>
</view>
<view class="section">
  <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea"/>
    <button form-type="submit"> Submit </button>
  </form>
</view>
//textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit: function(e) {
    console.log(e.detail.value.textarea)
  }
})

Bugs & Tips

  1. bug: In WeChat version 6.3.30, when textarea is rendered in a list, the location of the newly added textarea is miscalculated during automatic focus.
  2. tip: textarea blur events will be later than tap events on the page. If you need to get the textarea in a button tap event, you can use form bindsubmit.
  3. tip: Modifying user input in multiple rows of text is not recommended, therefore the textarea's bindinput processing function will not reflect the return value on the textarea.
  4. tip: The textarea component is a native component created by the client, its level is the highest.
  5. tip: Please do not use the textarea component in scroll-view.
  6. tip: css animation is ineffective on the textarea component.