WeChat small program form component multi-line input box textarea

May 18, 2021 WeChat Mini Program Development Document

textarea

Multiple lines of input boxes.

The property name	Type	The default	Description
value	String		Enter the contents of the box
placeholder	String		Enter the placeholder when the box is empty
placeholder-style	String		Specify the style of placeholder
placeholder-class	String	textarea-placeholder	Specify the style class of placeholder
disabled	Boolean	false	Whether to disable
maxlength	Number	140	Maximum input length, no maximum length is limited when set to -1
auto-focus	Boolean	false	Autofocus and pull up the keyboard.
focus	Boolean	false	Get the focus
auto-height	Boolean	false	Whether to automatically raise, style.height does not take effect when auto-height is set
fixed	Boolean	false	If textarea is in a `position:fixed` need to display the specified property fixed as true
cursor-spacing	Number	0	Specifies the distance between the cursor and the keyboard, in px. Take the distance from the bottom of textarea and the minimum distance specified by cursor-spacing as the distance between the cursor and the keyboard
bindfocus	EventHandle		Triggered when the input box is focused, event.detail .
bindblur	EventHandle		Triggered when the input box loses focus, event.detail .
bindlinechange	EventHandle		Call when the number of box lines changes, event.detail s high: 0, heightRpx: 0, lineCount: 0
bindinput	EventHandle		When the keyboard is entered, the input event is triggered, and the return value of the bindinput handler is not reflected on textarea
bindconfirm	EventHandle		Trigger the confirm event when clicked, 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="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view><view class="section">
  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="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)  }
})

Bug & Tip

bug : WeChat version 6.3.30 textarea the list is rendered, the textarea position in autofocus is miscalculated.
tip textarea blur than the tap event tap and if you need to get textarea at button click event, you can use bindsubmit form
tip : It is not recommended to modify the user's input on multiple lines of text, bindinput does not textarea textarea
tip textarea is a native component created by the client and has the highest hierarchy.
tip Do not use scroll-view component textarea
tip The css animation is not textarea component.

WeChat small program form component multi-line input box textarea

Table of contents

textarea

Bug & Tip

Cookie Consent