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 rows
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>
rax-textinput
is the component <textarea>
of rax, which can run in web and weex.
import { createElement, render } from "rax"; import Driver from 'driver-universal'; import TextInput from "rax-textinput"; function App() { return ( <View style={{margin: '20rpx'}}> <TextInput multiline={true} numberOfLines={3} style={{ height: '150rpx', width: '600rpx', borderWidth: '1rpx', borderColor: '#dddddd', borderStyle: 'solid' }} /> </View> ); } render(<App />, document.body, { driver: Driver });