# <textarea>

# 简介

<textarea><input> 组件类似,可用于接受用户输入数据。<textarea> 支持多行文本输入。 <textarea> 支持 <input> 支持的所有的属性、样式和事件。

# 子组件

<textarea> 不支持子组件。

# 属性

除了支持 input 支持的所有属性外,textarea 还支持 rows 属性,用于指定输入的行数。

  • rows, number, 默认值为2。

# 样式

# 通用样式

# 伪类样式

  • active
  • disabled
  • enbaled
  • focus

activefocus 的区别在于,当光标位于输入框里时,它就是 focus 状态,而只有触摸输入框时它才是 active 的状态。

# 文本样式

# 事件

  • 通用事件 支持所有通用事件
  • input. 当输入状态时,会不断触发。
    • @param value: 当前文本。
  • change. 当用户完成了输入时触发。
    • @param value: 当前文本。
  • focus. 当输入框获得焦点时触发。
  • blur. 当输入框失去焦点时触发。
  • return. 当用户点击了“回车”按钮时触发,会返回此时“回车”按钮的动作类型。
    • @param value: 当前文本。
    • @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done".
  • keyboard. 当键盘弹起或收起时触发。
    • @param isShow: boolean, 显示或隐藏键盘。
    • @param keyboardSize: 键盘的高度,以前端使用的样式单位返回。

# Vue 示例

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

rax-textinput<textarea> 组件的上层封装,抹平了 Web 和 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 文档

上次更新: 2019-12-6
文档写得很棒文档写得很差