# <textarea>

# Summary

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.

# Child Components

No child should be added to a textarea.

# Attributes

The textarea component supports all the properties of the input component. Besides, it support the rows attributes.

• rows, number, default is 2. Specify the rows of a textarea.

# Styles

# Common styles

• Checkout common styles.

# Pseudo-class styles

• active
• disabled
• enbaled
• focus

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.

# Text styles

• Checkout text styles

# Events

• common events. support common events.
• input. Fired when the text is being changed.
  • @param value: current text of the input.
• change. Fired when the user finished and make a commit.
  • @param value: current text of the input.
• focus. Fired when the input become focused.
• blur. Fired when the input lost focus.
• return. Fired when return key is pressed.
  • @param value: current text of the input.
  • @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done".
• keyboard. Fired when keyborad is shown or hidden.
  • @param isShow: boolean, showing or hiding the keyboard.
  • @param keyboardSize: keyboard height in web pixel format.

# Vue Example

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

• Demo
• Demo of events
• Demo of binding

# Rax Example

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 });

rax-textinput doc