<textarea>
与 <input>
组件类似,可用于接受用户输入数据。<textarea>
支持多行文本输入。 <textarea>
支持 <input>
支持的所有的属性、样式和事件。
<textarea>
不支持子组件。
除了支持 input
支持的所有属性外,textarea
还支持 rows
属性,用于指定输入的行数。
active
和 focus
的区别在于,当光标位于输入框里时,它就是 focus 状态,而只有触摸输入框时它才是 active 的状态。
<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>