title: type: references group: Build-in Components order: 8.06 version: 2.1

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 does not support any child component.

Attributes

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.

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

common events

check out common events

support appear / disappear event.

Methods

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
getSelectionRange(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
setTextFormatter(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 match
  - formatReplace {string}: Contents to replace after format matching
  - recoverRule {regexp}: Regular expressions to restore original content from formatted content
  - recoverReplace {string}: Content to replace when restoring original content

For details of setTextFormatter, please refer to sample

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

<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