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 事件。 请监听 inputchange 事件代替。

    支持以下通用事件:

    • longpress
    • appear
    • disappear

    查看 通用事件

示例

  1. <template>
  2. <divclass="wrapper">
  3. <textareaclass="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
  4. </div>
  5. </template>
  6. <script>
  7. const modal = weex.requireModule('modal')
  8. exportdefault{
  9. methods:{
  10. oninput (event){
  11. console.log('oninput:', event.value)
  12. modal.toast({
  13. message:`oninput: ${event.value}`,
  14. duration:0.8
  15. })
  16. },
  17. onchange (event){
  18. console.log('onchange:', event.value)
  19. modal.toast({
  20. message:`onchange: ${event.value}`,
  21. duration:0.8
  22. })
  23. },
  24. onfocus (event){
  25. console.log('onfocus:', event.value)
  26. modal.toast({
  27. message:`onfocus: ${event.value}`,
  28. duration:0.8
  29. })
  30. },
  31. onblur (event){
  32. console.log('onblur:', event.value)
  33. modal.toast({
  34. message:`input blur: ${event.value}`,
  35. duration:0.8
  36. })
  37. }
  38. }
  39. }
  40. </script>
  41. <style>
  42. .textarea {
  43. font-size:50px;
  44. width:650px;
  45. margin-top:50px;
  46. margin-left:50px;
  47. padding-top:20px;
  48. padding-bottom:20px;
  49. padding-left:20px;
  50. padding-right:20px;
  51. color:#666666;
  52. border-width:2px;
  53. border-style: solid;
  54. border-color:#41B883;
  55. }
  56. </style>

try it