textarea
is used to create interactive controls to accept keyboard input from users. It can be a multi-line input. <textarea>
supports all attributes, styles and events that <input>
supports.
No child should be added to a textarea
.
The textarea
component supports all the properties of the input
component. Besides, it support the row
attributes.
The difference between active
and focus
is that when the cursor is inside the input, it is focused. While only when you touch down the input, it is in active status.
<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>