• <textarea>
    • 简介
    • 子组件
    • 属性
    • 样式
      • 通用样式
      • 伪类样式
      • 文本样式
  • 事件
  • Vue 示例
  • Rax 示例

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