All Products
Search
Document Center

textarea

Last Updated: Apr 19, 2021

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}. -

Illustration

Code sample

 
  1. <view class="section">
  2. <textarea onBlur="bindTextAreaBlur" auto-height placeholder="Increase the height automatically" />
  3. </view>
  4. <view class="section">
  5. <textarea placeholder="Focus this only when the button is clicked" focus="{{focus}}" />
  6. <view class="btn-area">
  7. <button onTap="bindButtonTap">Make the entry box to be focused.</button>
  8. </view>
  9. </view>
  10. <view class="section">
  11. <form onSubmit="bindFormSubmit">
  12. <textarea placeholder="textarea in the form" name="textarea"/>
  13. <button form-type="submit"> Submit </button>
  14. </form>
  15. </view>
 
  1. Page({
  2. data: {
  3. focus: false,
  4. inputValue: ''
  5. },
  6. bindButtonTap() {
  7. this.setData({
  8. focus: true
  9. })
  10. },
  11. bindTextAreaBlur: function(e) {
  12. console.log(e.detail.value)
  13. },
  14. bindFormSubmit: function(e) {
  15. console.log(e.detail.value.textarea)
  16. }
  17. })

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.

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