v0.8+
The weex builtin component textarea
is used to create interactive controls to accept data from users. It can be a multi-line input.
Notes: <textarea>
support all event which <input>
had.
This component supports no child components.
The textarea
component supports all the properties of the text
component, in addition to the following properties:
rows:
<number> a number which can specify the height of textarea, default is 2
.Pseudo-classv0.9.5+: textarea
component support the following pseudo-classes:
active
focus
disabled
enabled
text styles: checkout text styles
color
style.font-size
style.font-style
style.font-weight
style.text-align
style.common styles: check out common styles for components
position
related styles.opacity
, background-color
etc.input
: the value of an element changes.change
: the change event is fired when a change to the component's value is commited by the user. It always come after a blur
event.focus
: a component has received focus.blur
: a component has lost focus.common events: check out the common events
appear
/ disappear
event. Check out common events.Notes: <textarea>
does not support the common-event click
. Please listen to the input
or change
event instead.
input
and change
events:value
: the value of the component who dispatched this event.timestamp
: the time stamp of the event.focus
and blur
events:timestamp
: the time stamp of the event.<template> <div class="wrapper"> <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea> </div> </template> <script> const modal = weex.requireModule('modal') export default { methods: { oninput (event) { console.log('oninput:', event.value) modal.toast({ message: `oninput: ${event.value}`, duration: 0.8 }) }, onchange (event) { console.log('onchange:', event.value) modal.toast({ message: `onchange: ${event.value}`, duration: 0.8 }) }, onfocus (event) { console.log('onfocus:', event.value) modal.toast({ message: `onfocus: ${event.value}`, duration: 0.8 }) }, onblur (event) { console.log('onblur:', event.value) modal.toast({ message: `input blur: ${event.value}`, duration: 0.8 }) } } } </script> <style> .textarea { font-size: 50px; width: 650px; margin-top: 50px; margin-left: 50px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; color: #666666; border-width: 2px; border-style: solid; border-color: #41B883; } </style>