阿里云赞助

<input>

input

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.

Child Components

This component supports no child components.

Attributes

  • 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.

Styles

  • 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

    • 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 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 component
    • value: component text value

common events

check out common events

  • support ‘appear’ / ‘disappear’ event.

Methoads

  • 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 range
    • selectionEnd {number}:set end location text selection range
  • getEditSelectionRange(callback[selectionStart,selectionEnd]) v0.11+get text selection range of input or textarea

    • selectionStart {number}:get starting location text selection range
    • selectionEnd {number}: get end location text selection range

Notes

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

<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>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0