textarea

v0.8+ textarea 是 Weex 内置的一个组件，用于用户交互，接受用户输入数据。 可以认为是允许多行的 <input> Notes: <textarea>支持 <input> 支持的所有的事件。

子组件

textarea 组件不支持子组件。

特性

• value {string}：组件的接收到的输入字符。
• placeholder {string}：提示用户可以输入什么。 提示文本不能有回车或换行。
• disabled {boolean}：表示是否支持输入。通常 click 事件在 disabled 控件上是失效的。
• autofocus {boolean}：表示是否在页面加载时控件自动获得输入焦点。
• rows {number}：接收 number 类型的数据，指定组件的高度，默认值是 2

样式

• 伪类v0.9.5+: textarea 支持以下伪类：
  • active
  • focus
  • disabled
  • enabled
• text styles
  • 支持 color
  • 支持 font-size
  • 支持 font-style
  • 支持 font-weight
  • 支持 text-align 查看 文本样式
• 通用样式：支持所有通用样式
  • 盒模型
  • flexbox 布局
  • position
  • opacity
  • background-color 查看 组件通用样式

事件

• input: 输入字符的值更改。 事件中 event 对象属性：
  • value: 触发事件的组件；
  • timestamp: 事件发生时的时间戳。
• change: 当用户输入完成时触发。通常在 blur 事件之后。 事件中 event 对象属性：
  • value: 触发事件的组件；
  • timestamp: 事件发生时的时间戳。
• focus: 组件获得输入焦点。 事件中 event 对象属性：
  • timestamp: 事件发生时的时间戳。
• blur: 组件失去输入焦点。 事件中 event 对象属性：
  • timestamp: 事件发生时的时间戳。
• 通用事件 注意：
  不支持 click 事件。 请监听 input 或 change 事件代替。 支持以下通用事件：
  • longpress
  • appear
  • disappear 查看 通用事件

示例

  1. <template>
    2.   <div class="wrapper">
    3.     <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
    4.   </div>
    5. </template>
    6.   7. <script>
    8.   const modal = weex.requireModule('modal')
    9.   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>
    43.   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>

try it