</h1> <h2 id="_2">简介</h2> <p><code><textarea></code> 与 <code><input></code> 组件类似，可用于接受用户输入数据。<code><textarea></code> 支持多行文本输入。 <code><textarea></code> 支持 <code><input></code> 支持的所有的属性、样式和事件。</p> <h2 id="_3">子组件</h2> <p><code><textarea></code> 不支持子组件。</p> <h2 id="_4">属性</h2> <p>除了支持 <code>input</code> 支持的所有属性外，<code>textarea</code> 还支持 <code>rows</code> 属性，用于指定输入的行数。 * <strong>rows</strong> , number, 默认值为2。</p> <h2 id="_5">样式</h2> <h4 id="_6">通用样式</h4> <ul> <li>支持所有通用样式。</li> </ul> <h4 id="_7">伪类样式</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="_8">文本样式</h4> <ul> <li>请参考文本样式</li> </ul> <h2 id="_9">事件</h2> <ul> <li><strong>通用事件</strong> 支持所有通用事件。</li> <li><strong>input</strong>. 当输入状态时，会不断触发。<ul> <li>@param value: 当前文本。</li> </ul> </li> <li><strong>change</strong>. 当用户完成了输入时触发。<ul> <li>@param value: 当前文本。</li> </ul> </li> <li><strong>focus</strong>. 当输入框获得焦点时触发。</li> <li><strong>blur</strong>. 当输入框失去焦点时触发。</li> <li><strong>return</strong>. 当用户点击了“回车”按钮时触发，会返回此时“回车”按钮的动作类型。<ul> <li>@param value: 当前文本。</li> <li>@param returnKeyType, “default” | “go” | “next” | “search” | “send” | “done”.</li> </ul> </li> <li><strong>keyboard</strong>. 当键盘弹起或收起时触发。<ul> <li>@param isShow: boolean, 显示或隐藏键盘。</li> <li>@param keyboardSize: 键盘的高度，以前端使用的样式单位返回。</li> </ul> </li> </ul> <h2 id="vue">Vue 示例</h2> <pre><code> 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> </code></pre> <ul> <li>示例</li> <li>事件示例</li> <li>绑定示例</li> </ul> <h2 id="rax">Rax 示例</h2> <p><code>rax-textinput</code> 是 <code><textarea></code> 组件的上层封装，抹平了 Web 和 Weex 的展现 1. import { createElement, render } from "rax"; 2. import Driver from 'driver-universal'; 3. import TextInput from "rax-textinput"; 4. 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. } 22. 23. render(<App />, document.body, { driver: Driver });</p> <p>rax-textinput 文档</p>