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. | |
placeholder-class | String | - | The specified placeholder style class. | |
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. | |
controlled | Boolean | false | Whether the component is a controlled component. If the value is true, the content of value is fully controlled by setData. | |
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}. | - |
Code sample
<view class="section">
<textarea onBlur="bindTextAreaBlur" auto-height placeholder="Increase the height automatically" />
</view>
<view class="section">
<textarea placeholder="Focus this only when the button is clicked" focus="{{focus}}" />
<view class="btn-area">
<button onTap="bindButtonTap">Make the entry box to be focused.</button>
</view>
</view>
<view class="section">
<form onSubmit="bindFormSubmit">
<textarea placeholder="textarea in the form" name="textarea"/>
<button form-type="submit"> Submit </button>
</form>
</view>
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
}
})
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.
<textarea value="{{inputValue}}" enableNative="{{false}}" maxlength="500" onInput="onInput" />