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 supports no child components.
type
: 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
, number
etc. each of which has the same meaning with W3C standard.
value
: the 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.
maxlength
: v0.7+ a number value to specify maxlength of input.
return-key-type {string}
:v0.11the keybord returen key type support defalut;go;next;search;send,done.
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
check out common styles for components
input: the value of an input character 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 click.
the object property of event:
returnKeyType
: return key Type of componentvalue
: component text valuecheck out common events
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 rangegetEditSelectionRange(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 rangedoes not support the common-event ‘click’. Please listen to the ‘input’ or ‘change’ event instead.
<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>