Form Component_Detailed explanation of mini program form multi-line input box table

Multi-line input box.

Attribute name	type	default value	illustrate
value	String		Contents of the input box
placeholder	String		Placeholder when the input 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, when set to -1, there is no limit to the maximum length
auto-focus	Boolean	false	Auto focus, pull up the keyboard.
focus	Boolean	false	Get focus
auto-height	Boolean	false	Whether to automatically increase the height. When setting auto-height, style.height does not take effect
fixed	Boolean	false	If the textarea is in a position:fixed area, the specified attribute fixed needs to be displayed as true
cursor-spacing	Number	0	Specify the distance between the cursor and the keyboard, in px. Take the minimum value of the distance between the textarea and the bottom and the 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 = {value: value}
bindblur	EventHandle		Triggered when the input box loses focus, event.detail = {value: value}
bindlinechange	EventHandle		Called when the number of lines in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	EventHandle		When keyboard input occurs, the input event is triggered, event.detail = {value: value}, The return value of the bindinput processing function will not be reflected on the textarea
bindconfirm	EventHandle		When the click is completed, the confirm event is triggered, 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

1. bug : In WeChat version 6.3.30, when textarea is rendered in the list, the position of the newly added textarea during automatic focus is calculated incorrectly.

2. tip:textarea’s blur event will be later than the tap event on the page , if you need to get textarea in the click event of button, you can use bindsubmit of form.

3. tip: It is not recommended to modify user input on multi-line text, so bindinput of textarea The processing function does not reflect the return value to textarea.

4. tip:textarea component is a native component created by the client, and its level is the highest.

5. tip: Do not use the textarea component in scroll-view.

6. tip:css animation is not valid for the textarea component.

Related articles:

WeChat mini program component form form interpretation and analysis introduction

WeChat mini program Form component sharing

Related video:

WeChat Mini Program Development Document

The above is the detailed content of Form Component_Detailed explanation of mini program form multi-line input box table. For more information, please follow other related articles on the PHP Chinese website!