How to realize the Mini Program form multi-line input box table

This article mainly explains the "Mini Program form multi-line input box table how to achieve", the article explains the content is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in-depth, together to study and learn "Mini Program form multi-line input box table how to achieve" it!

Multiline input box.

Attribute name type default value description valueString

Enter the contents of the box placeholderString

Placeholder placeholder-styleString when the input box is empty

Specify the style of placeholder placeholder-classStringtextarea-placeholder specifies whether the style class disabledBooleanfalse of placeholder disables the maximum input length of maxlengthNumber140, sets it to-1 without limiting the maximum length auto-focusBooleanfalse autofocus, and pulls up the keyboard. FocusBooleanfalse gets whether the focus auto-heightBooleanfalse increases automatically. When setting auto-height, style.height does not take effect fixedBooleanfalse if the textarea is in an area of position:fixed, you need to display the specified attribute fixed specifies the distance between the cursor and the keyboard (in px) for truecursor-spacingNumber0. Take the minimum distance from the bottom of textarea and the distance specified by cursor-spacing as the distance between the cursor and the keyboard bindfocusEventHandle

Triggered when the input box is focused, event.detail = {value: value} bindblurEventHandle

Triggered when the input box loses focus, event.detail = {value: value} bindlinechangeEventHandle

Called when the number of rows in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0} bindinputEventHandle

When typing on the keyboard, the input event is triggered, event.detail = {value: value}, and the return value of the bindinput handler is not reflected in the bindconfirmEventHandle on the textarea.

When you click finish, the confirm event is triggered, event.detail = {value: value}

Sample code:

Make the input box get focus submission / / textarea.jsPage ({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 the position of the newly added textarea in autofocus was miscalculated when the list was rendered.

The blur event of tip:textarea is later than the tap event on the page. If you need to get the textarea in the click event of button, you can use form's bindsubmit.

Tip: it is not recommended to modify the user's input on multiline text, so the bindinput handler of textarea does not reflect the return value to textarea.

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

Tip: do not use textarea components in scroll-view.

Tip:css animation is not valid for textarea components.

Thank you for your reading, the above is the "Mini Program form multi-line input box table how to achieve" the content, after the study of this article, I believe you on the Mini Program form multi-line input box table how to achieve this problem have a deeper understanding, the specific use of the need for everyone to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!