<textarea>

简介

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

子组件

<textarea> 不支持子组件。

属性

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

  • rows, number, 默认值为2。

样式

通用样式

伪类样式

  • active
  • disabled
  • enbaled
  • focus

active 和 focus 的区别在于，当光标位于输入框里时，它就是 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 示例

  1. <template>
  2.   <div class="wrapper">
  3.     <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
  4.   </div>
  5. </template>
  7. <script>
  8.   const modal = weex.requireModule('modal')
  10.   export default {
  11.     methods: {
  12.       oninput (event) {
  13.         console.log('oninput:', event.value)
  14.         modal.toast({
  15.           message: `oninput: ${event.value}`,
  16.           duration: 0.8
  17.         })
  18.       },
  19.       onchange (event) {
  20.         console.log('onchange:', event.value)
  21.         modal.toast({
  22.           message: `onchange: ${event.value}`,
  23.           duration: 0.8
  24.         })
  25.       },
  26.       onfocus (event) {
  27.         console.log('onfocus:', event.value)
  28.         modal.toast({
  29.           message: `onfocus: ${event.value}`,
  30.           duration: 0.8
  31.         })
  32.       },
  33.       onblur (event) {
  34.         console.log('onblur:', event.value)
  35.         modal.toast({
  36.           message: `input blur: ${event.value}`,
  37.           duration: 0.8
  38.         })
  39.       }
  40.     }
  41.   }
  42. </script>
  44. <style>
  45.   .textarea {
  46.     font-size: 50px;
  47.     width: 650px;
  48.     margin-top: 50px;
  49.     margin-left: 50px;
  50.     padding-top: 20px;
  51.     padding-bottom: 20px;
  52.     padding-left: 20px;
  53.     padding-right: 20px;
  54.     color: #666666;
  55.     border-width: 2px;
  56.     border-style: solid;
  57.     border-color: #41B883;
  58.   }
  59. </style>

Rax 示例

rax-textinput 是 <textarea> 组件的上层封装，抹平了 Web 和 Weex 的展现

  1. import { createElement, render } from "rax";
  2. import Driver from 'driver-universal';
  3. import TextInput from "rax-textinput";
  5. function App() {
  6.   return (
  7.     <View style={{margin: '20rpx'}}>
  8.       <TextInput
  9.         multiline={true}
  10.         numberOfLines={3}
  11.         style={{
  12.           height: '150rpx',
  13.           width: '600rpx',
  14.           borderWidth: '1rpx',
  15.           borderColor: '#dddddd',
  16.           borderStyle: 'solid'
  17.         }}
  18.       />
  19.     </View>
  20.   );
  21. }
  23. render(<App />, document.body, { driver: Driver });

rax-textinput 文档