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.


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.


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


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


  <div class="wrapper">
    <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>

  const modal = weex.requireModule('modal')

  export default {
    methods: {
      oninput (event) {
        console.log('oninput:', event.value)
          message: `oninput: ${event.value}`,
          duration: 0.8
      onchange (event) {
        console.log('onchange:', event.value)
          message: `onchange: ${event.value}`,
          duration: 0.8
      onfocus (event) {
        console.log('onfocus:', event.value)
          message: `onfocus: ${event.value}`,
          duration: 0.8
      onblur (event) {
        console.log('onblur:', event.value)
          message: `input blur: ${event.value}`,
          duration: 0.8

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