<textarea>

</h1> <h2 id="简介"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E7%AE%80%E4%BB%8B" target="_blank">#</a>简介</h2> <p><code><textarea></code> 与 <a href="https://weexapp.com/zh/docs/components/input.html" target="_blank">``</a> 组件类似，可用于接受用户输入数据。<code><textarea></code> 支持多行文本输入。 <code><textarea></code> 支持 <code><input></code> 支持的所有的属性、样式和事件。</p> <h2 id="子组件"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E5%AD%90%E7%BB%84%E4%BB%B6" target="_blank">#</a>子组件</h2> <p><code><textarea></code> 不支持子组件。</p> <h2 id="属性"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E5%B1%9E%E6%80%A7" target="_blank">#</a>属性</h2> <p>除了支持 <code>input</code> 支持的所有属性外，<code>textarea</code> 还支持 <code>rows</code> 属性，用于指定输入的行数。</p> <ul> <li><strong>rows</strong>, number, 默认值为2。</li> </ul> <h2 id="样式"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E6%A0%B7%E5%BC%8F" target="_blank">#</a>样式</h2> <h4 id="通用样式"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E9%80%9A%E7%94%A8%E6%A0%B7%E5%BC%8F" target="_blank">#</a>通用样式</h4> <ul> <li>支持所有<a href="https://weexapp.com/zh/docs/styles/common-styles.html" target="_blank">通用样式</a>。</li> </ul> <h4 id="伪类样式"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E4%BC%AA%E7%B1%BB%E6%A0%B7%E5%BC%8F" target="_blank">#</a>伪类样式</h4> <ul> <li><strong>active</strong></li> <li><strong>disabled</strong></li> <li><strong>enbaled</strong></li> <li><strong>focus</strong></li> </ul> <p><code>active</code> 和 <code>focus</code> 的区别在于，当光标位于输入框里时，它就是 focus 状态，而只有触摸输入框时它才是 active 的状态。</p> <h4 id="文本样式"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F" target="_blank">#</a>文本样式</h4> <ul> <li>请参考<a href="https://weexapp.com/zh/docs/styles/text-styles.html" target="_blank">文本样式</a></li> </ul> <h2 id="事件"><a href="https://weexapp.com/zh/docs/components/textarea.html#%E4%BA%8B%E4%BB%B6" target="_blank">#</a>事件</h2> <ul> <li> <p><strong>通用事件</strong> 支持所有<a href="https://weexapp.com/zh/docs/events/common-events.html" target="_blank">通用事件</a>。</p> </li> <li> <p>input</p> <p>. 当输入状态时，会不断触发。</p> <ul> <li>@param value: 当前文本。</li> </ul> </li> <li> <p>change</p> <p>. 当用户完成了输入时触发。</p> <ul> <li>@param value: 当前文本。</li> </ul> </li> <li> <p><strong>focus</strong>. 当输入框获得焦点时触发。</p> </li> <li> <p><strong>blur</strong>. 当输入框失去焦点时触发。</p> </li> <li> <p>return</p> <p>. 当用户点击了“回车”按钮时触发，会返回此时“回车”按钮的动作类型。</p> <ul> <li>@param value: 当前文本。</li> <li>@param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done".</li> </ul> </li> <li> <p>keyboard</p> <p>. 当键盘弹起或收起时触发。</p> <ul> <li>@param isShow: boolean, 显示或隐藏键盘。</li> <li>@param keyboardSize: 键盘的高度，以前端使用的样式单位返回。</li> </ul> </li> </ul> <h2 id="vue-示例"><a href="https://weexapp.com/zh/docs/components/textarea.html#vue-%E7%A4%BA%E4%BE%8B" target="_blank">#</a>Vue 示例</h2> <pre><code class="language-html"><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> </code></pre> <ul> <li><a href="http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa" target="_blank">示例</a></li> <li><a href="http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40" target="_blank">事件示例</a></li> <li><a href="http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1" target="_blank">绑定示例</a></li> </ul> <h2 id="rax-示例"><a href="https://weexapp.com/zh/docs/components/textarea.html#rax-%E7%A4%BA%E4%BE%8B" target="_blank">#</a>Rax 示例</h2> <p><code>rax-textinput</code> 是 <code><textarea></code> 组件的上层封装，抹平了 Web 和 Weex 的展现</p> <pre><code class="language-jsx">import { createElement, render } from "rax"; import Driver from 'driver-universal'; import TextInput from "rax-textinput"; function App() { return ( <View style={{margin: '20rpx'}}> <TextInput multiline={true} numberOfLines={3} style={{ height: '150rpx', width: '600rpx', borderWidth: '1rpx', borderColor: '#dddddd', borderStyle: 'solid' }} /> </View> ); } render(<App />, document.body, { driver: Driver }); </code></pre> <p><a href="https://rax.js.org/docs/components/textinput" target="_blank">rax-textinput 文档</a></p>