<input>

0.4 cn

Summary

The weex builtin component input is used to create interactive controls to accept data from users. How a input component works varies considerably depending on the value of its type attribute, such as text, password, url, email, tel etc.

Notes: <input> does not support the common-event click. Please listen to the input or change event instead.

Child Components

This component supports no child components.

Attributes

type: <string> the type of controls to display. The default value is text, if this attribute is not specified. Possible values are text, password, tel, email, url etc, each of which has the same meaning with w3c standard.
value: <string> the value of the control.
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.
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.
autofocus: <boolean> a boolean attribute lets you specify that a form control should have input focus when the page loads.
maxlength^0.7 :<length> a number value to specify maxlength of input

Other attributes please check out the common attributes.

Styles

placeholder-color: the color of placeholder. Default value is #999999.

text styles: checkout text styles

support color style.
support font-size style.
support font-style style.
support font-weight style.
support text-align style.

common styles: check out common styles for components

support flexbox related styles
support box model related styles
support position related styles
support opacity, background-color etc.

Events

input: the value of an element changes.
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.
focus: a component has received focus.
blur: a component has lost focus.

common events: check out the common events

support appear / disappear event. Check out common events

Notes: <input> does not support the common-event click. Please listen to the input or change event instead.

Parameters of events' object

for input and change events:
- value: the value of the component who dispatched this event.
- timestamp: the time stamp of the event.
for focus and blur events:
- timestamp: the time stamp of the event.

Example

<div>
  <input
    type="url"
    autofocus="true"
    placeholder="..."
    value="http://alibaba.github.io/weex/"
    style="placeholder-color: #666666;">
  </input>
</div>

input