<input>

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

注意：

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

当需要多个<input> 进行切换时，需要加上 key 属性以区分组件，避免 web 环境下数据丢失。

子组件

不支持子组件。

特性

• 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。
• autocapitalize {string}：键盘自动大小写类型，支持 none-不自动大写，words-单词的首字母自动大写，sentences-语句的首字母自动大写，characters-每个字母均自动大写。只对原生系统默认输入法有效，不支持web环境。
• allowCopyPaste {boolean}： 是否禁止复制粘贴文本内容
• 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}：设置文本选区的起终点
• getSelectionRange(callback[selectionStart,selectionEnd]) v0.11+设置文本选区
  • selectionStart {number}：获取文本选区的起始点
  • selectionEnd {number}：获取文本选区的起终点
• setTextFormatter(params)v0.18+：这是一个非常有用的特性，可以对input设置一组对输入的内容进行实时格式化的规则。
  • params {object}：格式化规则，包含以下参数：
    • formatRule {regexp}：格式化匹配的正则表达式
    • formatReplace {string}：格式化匹配后用于替换的内容
    • recoverRule {regexp}：从格式化后的内容还原原始内容的正则表达式
    • recoverReplace {string}：还原原始内容时用于替换的内容

约束

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

示例

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