The weex builtin component input
is used to create input controls to receive the user's input characters. How a input
component works varies considerably depending on the value of its type
attribute, such as text
, password
, url
, email
, tel
etc.
No child should be added to a input
.
type
: the type of controls to display. The default value is text
, if this attribute is not specified. Possible values are text
, date
, datetime
, email
, password
, tel
, time
, url
, number
. each of which has the same meaning with W3C standard.
value
: the default value(text) of the control.
placeholder
: 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
: 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
: a boolean attribute lets you specify that a form control should have input focus when the page loads.
singleline
: a boolean sttribute sets the properties of this field (lines, horizontally scrolling, transformation method) to be for a single-line input.
lines
: makes the input exactly this many lines tall.
max-length
: constrain edits not to make the length of the text greater than the specified length.
max
constrain the max date when type
is date
, format is yyyy-MM-dd
min
constrain the min date when type
is date
, format is yyyy-MM-dd
maxlength
: a number value to specify maxlength of input.
return-key-type
: the keybord returen key type support defalut
, go
, next
, search
, send
, done
.
auto-capitalization-type
: the keybord auto capitalization type support none
, words
, sentences
, allCharacters
.
upriseOffset
: the additional vertical margin between bottom of input and top of keyboard if the keyboard would cover the input. Default is 20 system pixels on iOS.
hideDoneButton
: , hide the “Done” button toolbar on keyboard.
::: tip Input component does not support separate border styles for edges. You can wrap another div out of the input. :::
input
component support the following pseudo-classes:active
focus
disabled
enabled
color
style.font-size
style.font-style
style.font-weight
style.text-align
style.::: tip Input component does not support the common-event click
. Please listen to the input
or change
event instead. :::
focus()
The focus()
method is used to give focus to an input component and tigger soft keybord(if it can be focused).
blur()
The blur()
method is used to remove focus from an input component and close soft keybord(if it has focus).
setSelectionRange(selectionStart,selectionEnd)
Set text selection range of input or textarea
selectionStart {number}
:set starting location text selection rangeselectionEnd {number}
:set end location text selection rangegetSelectionRange(callback[selectionStart,selectionEnd])
Get text selection range of input or textarea
selectionStart {number}
:get starting location text selection rangeselectionEnd {number}
: get end location text selection rangesetTextFormatter(params)
This is a very useful feature,can be used to set a set of rules for the input to formatting the input content in real-time.
params {object}
:formatting rules, contains the following parameters:formatRule {regexp}
: Regular expression used to format the matchformatReplace {string}
: Contents to replace after format matchingrecoverRule {regexp}
: Regular expressions to restore original content from formatted contentrecoverReplace {string}
: Content to replace when restoring original contentFor details of setTextFormatter
, please refer to sample
::: warning
input does not support the common-event click
. Please listen to the input
or change
event instead.
:::
input
and change
events:value
: the value of the component who dispatched this event.timestamp
: the time stamp of the event.focus
and blur
events:timestamp
: the time stamp of the event.[input with normal content and binding actions Example] (http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f)