v0.8+
textarea
是 Weex 内置的一个组件,用于用户交互,接受用户输入数据。 可以认为是允许多行的 <input>
Notes: <textarea>
支持 <input>
支持的所有的事件。
textarea
组件不支持子组件。
textarea
组件支持text
组件的所有属性,除此之外还支持以下属性:
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
查看 通用事件
<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>