• input
    • 子组件
    • 特性
    • 样式
    • 事件
    • Methods
    • 约束
    • 示例

    input

    Weex 内置的 <input> 组件用来创建接收用户输入字符的输入组件。 <input> 组件的工作方式因 type 属性的值而异，比如 text， password，url，email，tel 等。

    注意：

    此组件不支持 click 事件。请监听 input 或 change 来代替 click 事件。

    子组件

    不支持子组件。

    特性

    • type {string}：控件的类型，默认值是 <text>。type 值可以是 text，date，datetime，email， password，tel，time，url，number 。每个 type 值都符合 W3C 标准。
    • value {string}：组件的默认内容。
    • placeholder {string}：提示用户可以输入什么。 提示文本不能有回车或换行。
    • disabled {boolean}：布尔类型的数据，表示是否支持输入。通常 click 事件在 disabled 控件上是失效的。
    • autofocus {boolean}：布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点。
    • maxlength {nubmer}：v0.7一个数值类型的值，表示输入的最大长度。
    • return-key-type {string}：v0.11键盘返回键的类型,支持 defalut;go;next;search;send,done。
    • singleline {boolean}：控制内容是否只允许单行
    • max-length {number}：控制输入内容的最大长度
    • lines：控制输入内容的最大行数
    • max：控制当type属性为date时选择日期的最大时间，格式为yyyy-MM-dd
    • min：控制当type属性为date时选择日期的最小时间，格式为yyyy-MM-dd

    样式

    • placeholder-color {color}：placeholder 字符颜色。默认值是 #999999

    • 伪类v0.9.5+: input 支持以下伪类：

      • active
      • focus
      • disabled
      • enabled

    • text styles

      • 支持 color
      • 支持 font-size
      • 支持 font-style
      • 支持 font-weight
      • 支持 text-align

      查看 文本样式

    • 通用样式：支持所有通用样式

      • 盒模型
      • flexbox 布局
      • position
      • opacity
      • background-color

      查看 组件通用样式

    事件

    • input: 输入字符的值更改。

      事件中 event 对象属性：

      • value: 触发事件的组件；
      • timestamp: 事件发生时的时间戳,仅支持Android。

    • change: 当用户输入完成时触发。通常在 blur 事件之后。

      事件中 event 对象属性：

      • value: 触发事件的组件；

      • timestamp: 事件发生时的时间戳,仅支持Android。

    • focus: 组件获得输入焦点。

      事件中 event 对象属性：

      • timestamp: 事件发生时的时间戳,仅支持Android。

    • blur: 组件失去输入焦点。

      事件中 event 对象属性：

      • timestamp: 事件发生时的时间戳,仅支持Android。

    • return: 键盘点击返回键。

      事件中 event 对象属性：

      • returnKeyType: 事件发生时的返回键类型。
      • value: 触发事件的组件的文本；

    • 通用事件

      注意：
      不支持 click 事件。 请监听 input 或 change 事件代替。

      支持以下通用事件：

      • longpress
      • appear
      • disappear

      查看 通用事件

    Methods

    • focus() v0.9+

      focus() 方法用于将 input 组件聚焦。

    • blur() v0.9+

      blur() 方法用于从 input 组件中移除焦点并关闭软键盘（如果它具有焦点）。

    • setSelectionRange(selectionStart,selectionEnd) v0.11+设置文本选区
      • selectionStart {number}：设置文本选区的起始点
      • selectionEnd {number}：设置文本选区的起终点
    • getEditSelectionRange(callback[selectionStart,selectionEnd]) v0.11+设置文本选区
      • selectionStart {number}：获取文本选区的起始点
      • selectionEnd {number}：获取文本选区的起终点

        约束

    目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 <input> 组件的 input、change 事件中改写。

    示例

    1. <template>
    2.   <div>
    3.     <div>
    4.       <text style="font-size: 40px">oninput: {{txtInput}}</text>
    5.       <text style="font-size: 40px">onchange: {{txtChange}}</text>
    6.       <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
    7.       <text style="font-size: 40px">selection: {{txtSelection}}</text>
    9.     </div>
    10.     <scroller>
    11.       <div>
    12.         <div style="background-color: #286090">
    13.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
    14.         </div>
    15.         <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/>
    16.       </div>
    18.       <div>
    19.         <div style="background-color: #286090">
    20.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
    21.         </div>
    22.         <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
    23.       </div>
    25.       <div>
    26.         <div style="background-color: #286090">
    27.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
    28.         </div>
    29.         <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
    30.       </div>
    32.       <div>
    33.         <div style="background-color: #286090">
    34.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
    35.         </div>
    36.         <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
    37.       </div>
    39.       <div>
    40.         <div style="background-color: #286090">
    41.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
    42.         </div>
    43.         <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
    44.       </div>
    46.       <div>
    47.         <div style="background-color: #286090">
    48.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
    49.         </div>
    50.         <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
    51.       </div>
    53.       <div>
    54.         <div style="background-color: #286090">
    55.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = number</text>
    56.         </div>
    57.         <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/>
    58.       </div>
    60.       <div>
    61.         <div style="background-color: #286090">
    62.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
    63.         </div>
    64.         <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
    65.       </div>
    67.       <div>
    68.         <div style="background-color: #286090">
    69.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
    70.         </div>
    71.         <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
    72.       </div>
    74.       <div>
    75.         <div style="background-color: #286090">
    76.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
    77.         </div>
    78.         <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
    79.       </div>
    81.       <div>
    82.         <div style="background-color: #286090">
    83.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
    84.         </div>
    85.         <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
    86.       </div>
    88.       <div>
    89.         <div style="background-color: #286090">
    90.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
    91.         </div>
    92.         <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
    93.       </div>
    95.       <div>
    96.         <div style="background-color: #286090">
    97.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
    98.         </div>
    99.         <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
    100.       </div>
    102.       <div>
    103.         <div style="background-color: #286090">
    104.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
    105.         </div>
    106.         <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
    107.       </div>
    110.       <div>
    111.         <div style="background-color: #286090">
    112.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
    113.         </div>
    114.         <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
    115.           <text class="button" value="Focus" type="primary" @click="focus"></text>
    116.           <text class="button" value="Blur" type="primary" @click="blur"></text>
    117.         </div>
    119.         <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
    120.       </div>
    123.       <div>
    124.         <div style="background-color: #286090">
    125.           <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
    126.         </div>
    127.         <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
    128.           <text class="button" value="setRange" type="primary" @click="setRange"></text>
    129.           <text class="button" value="getSelectionRange" type="primary" @click="getSelectionRange"></text>
    130.         </div>
    131.         <input type="text"  ref="inputselection" placeholder="please input" value="123456789"  class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
    132.       </div>
    136.     </scroller>
    137.   </div>
    138. </template>
    140. <style scoped>
    141.   .input {
    142.     font-size: 60px;
    143.     height: 80px;
    144.     width: 750px;
    145.   }
    146.   .button {
    147.     font-size: 36;
    148.     width: 200;
    149.     color: #41B883;
    150.     text-align: center;
    151.     padding-top: 10;
    152.     padding-bottom: 10;
    153.     border-width: 2;
    154.     border-style: solid;
    155.     margin-right: 20;
    156.     border-color: rgb(162, 217, 192);
    157.     background-color: rgba(162, 217, 192, 0.2);
    158.   }
    159. </style>
    161. <script>
    162.   module.exports = {
    163.     data: function () {
    164.       return {
    165.         txtInput: '',
    166.         txtChange: '',
    167.         txtReturnType: '',
    168.         txtSelection:'',
    169.         autofocus: false
    170.       };
    171.     },
    172.     methods: {
    173.       ready: function () {
    174.         var self = this;
    175.         setTimeout(function () {
    176.           self.autofocus = true;
    177.         }, 1000);
    178.       },
    179.       onchange: function (event) {
    180.         this.txtChange = event.value;
    181.         console.log('onchange', event.value);
    182.       },
    183.       onreturn: function (event) {
    184.         this.txtReturnType = event.returnKeyType;
    185.         console.log('onreturn', event.type);
    186.       },
    187.       oninput: function (event) {
    188.         this.txtInput = event.value;
    189.         console.log('oninput', event.value);
    190.       },
    191.       focus: function () {
    192.         this.$refs['input1'].focus();
    193.       },
    194.       blur: function () {
    195.         this.$refs['input1'].blur();
    196.       },
    197.       setRange: function() {
    198.         console.log(this.$refs["inputselection"]);
    199.         this.$refs["inputselection"].setSelectionRange(2, 6);
    200.       },
    201.       getSelectionRange: function() {
    202.         console.log(this.$refs["inputselection"]);
    203.         var self = this;
    204.         this.$refs["inputselection"].getSelectionRange(function(e) {
    205.           self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
    206.         });
    207.       }
    208.     }
    209.   };
    210. </script>

    体验一下