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.
Notes: does not support the common-event click
. Please listen to the input
or change
event instead.
This component does not support any child component.
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
: v0.7+ a number value to specify maxlength of input.
return-key-type
:v0.11the keybord returen key type support defalut
, go
, next
, search
, send
, done
.
auto-capitalization-type
:the keybord auto capitalization type support none
, words
, sentences
, allCharacters
.
placeholder-color: the color of placeholder. Default value is ‘#999999’.
Pseudo-classv0.9.5+: input
component support the following pseudo-classes:
active
focus
disabled
enabled
text styles: checkout text styles
color
style.font-size
style.font-style
style.font-weight
style.text-align
style.check out common styles for components
position
related styles.opacity
, background-color
etc.input
: the input evenr is fired when input content 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.
return
: the return key clicked.
the object property of event:
returnKeyType
: return key Type of componentvalue
: component text valuecheck out common events
appear
/ disappear
event.focus()
v0.9+The focus()
method is used to give focus to an input component and tigger soft keybord(if it can be focused).
blur()
v0.9+The blur()
method is used to remove focus from an input component and close soft keybord(if it has focus).
setSelectionRange(selectionStart,selectionEnd)
v0.11+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])
v0.11+get text selection range of input or textarea
selectionStart {number}
:get starting location text selection rangeselectionEnd {number}
: get end location text selection rangesetTextFormatter(params)
v0.18+: 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
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.<template> <div> <div> <text style="font-size: 40px">oninput: {{txtInput}}</text> <text style="font-size: 40px">onchange: {{txtChange}}</text> <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text> <text style="font-size: 40px">selection: {{txtSelection}}</text> </div> <scroller> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text> </div> <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text> </div> <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text> </div> <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text> </div> <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text> </div> <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text> </div> <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = number</text> </div> <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text> </div> <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text> </div> <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" /> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text> </div> <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" /> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text> </div> <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" /> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text> </div> <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" /> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text> </div> <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" /> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text> </div> <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" /> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text> </div> <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between"> <text class="button" value="Focus" type="primary" @click="focus"></text> <text class="button" value="Blur" type="primary" @click="blur"></text> </div> <input type="text" placeholder="Input1" class="input" value="" ref="input1"/> </div> <div> <div style="background-color: #286090"> <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text> </div> <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between"> <text class="button" value="setRange" type="primary" @click="setRange"></text> <text class="button" value="getSelectionRange" type="primary" @click="getSelectionRange"></text> </div> <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/> </div> </scroller> </div> </template> <style scoped> .input { font-size: 60px; height: 80px; width: 750px; } .button { font-size: 36; width: 200; color: #41B883; text-align: center; padding-top: 10; padding-bottom: 10; border-width: 2; border-style: solid; margin-right: 20; border-color: rgb(162, 217, 192); background-color: rgba(162, 217, 192, 0.2); } </style> <script> module.exports = { data: function () { return { txtInput: '', txtChange: '', txtReturnType: '', txtSelection:'', autofocus: false }; }, methods: { ready: function () { var self = this; setTimeout(function () { self.autofocus = true; }, 1000); }, onchange: function (event) { this.txtChange = event.value; console.log('onchange', event.value); }, onreturn: function (event) { this.txtReturnType = event.returnKeyType; console.log('onreturn', event.type); }, oninput: function (event) { this.txtInput = event.value; console.log('oninput', event.value); }, focus: function () { this.$refs['input1'].focus(); }, blur: function () { this.$refs['input1'].blur(); }, setRange: function() { console.log(this.$refs["inputselection"]); this.$refs["inputselection"].setSelectionRange(2, 6); }, getSelectionRange: function() { console.log(this.$refs["inputselection"]); var self = this; this.$refs["inputselection"].getSelectionRange(function(e) { self.txtSelection = e.selectionStart +'-' + e.selectionEnd; }); } } }; </script>