|
| 1 | +# <textarea> |
| 2 | +<span class="weex-version">0.8</span> |
| 3 | +<a href="https://github.com/weexteam/article/issues/95" class="weex-translate">cn</a> |
| 4 | + |
| 5 | + |
| 6 | +### Summary |
| 7 | + |
| 8 | +The weex builtin component ``textarea`` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.md). |
| 9 | + |
| 10 | +**Notes:** `<textarea>` support all event which `<input>` had. |
| 11 | + |
| 12 | +### Child Components |
| 13 | + |
| 14 | +This component supports no child components. |
| 15 | + |
| 16 | +### attributes |
| 17 | + |
| 18 | +- `value`: <string> the value of the control. |
| 19 | +- `placeholder`: <string> a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds. |
| 20 | +- `disabled`: <boolean> a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. |
| 21 | +- `autofocus`: <boolean> a boolean attribute lets you specify that a form control should have input focus when the page loads. |
| 22 | +- `rows:`<number> a number which can specify the height of textarea, default is `2`. |
| 23 | + |
| 24 | +Other attributes please check out the [common attributes](../references/common-attrs.md). |
| 25 | + |
| 26 | +### Styles |
| 27 | + |
| 28 | +**text styles**: checkout [text styles](../references/text-style.md) |
| 29 | + |
| 30 | +- support `color` style. |
| 31 | +- support `font-size` style. |
| 32 | +- support `font-style` style. |
| 33 | +- support `font-weight` style. |
| 34 | +- support `text-align` style. |
| 35 | + |
| 36 | + |
| 37 | +**common styles**: check out [common styles for components](../references/common-style.md) |
| 38 | + |
| 39 | +- support flexbox related styles. |
| 40 | +- support box model related styles. |
| 41 | +- support ``position`` related styles. |
| 42 | +- support ``opacity``, ``background-color`` etc. |
| 43 | + |
| 44 | +### Events |
| 45 | + |
| 46 | +- `input`: the value of an element changes. |
| 47 | +- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event. |
| 48 | +- `focus`: a component has received focus. |
| 49 | +- `blur`: a component has lost focus. |
| 50 | + |
| 51 | +**common events**: check out the [common events](../references/common-event.md) |
| 52 | + |
| 53 | +- support `appear` / `disappear` event. Check out [common events](../references/common-event.md). |
| 54 | + |
| 55 | +**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead. |
| 56 | + |
| 57 | +### Parameters of events' object |
| 58 | + |
| 59 | +- for ``input`` and ``change`` events: |
| 60 | + - `value`: the value of the component who dispatched this event. |
| 61 | + - `timestamp`: the time stamp of the event. |
| 62 | +- for ``focus`` and ``blur`` events: |
| 63 | + - `timestamp`: the time stamp of the event. |
| 64 | + |
| 65 | +### Example |
| 66 | + |
| 67 | +``` |
| 68 | +<div> |
| 69 | + <textarea |
| 70 | + autofocus="true" |
| 71 | + placeholder="..." |
| 72 | + value="I am a multiple input"> |
| 73 | + </textarea> |
| 74 | +</div> |
| 75 | +``` |
0 commit comments