# BaseInput

* category: Components
* chinese: 基础输入框
* type: 基本

---

## API

### Props

| 参数             | 说明            | 类型  |  默认值    | 可选值|
| ---------------- | --------------------------------- | -------------------- | --------- |--------- |
| multiple         | 多行            | boolean              | false     ||
| type             | 输入类型           | String| `text`      |`text` `date` `tel` `number`|
| disabled         | 是否禁用        | boolean              | false     ||
| readOnly         | 是否只读        | Boolean              | false     ||
| maxLength        | 最大长度，只有 type = `text` 才生效             | number| -    ||
| onInput          | 输入事件        | `function(value, e)` | false     ||
| onFocus          | Focus 事件      | `function`           | false     ||
| onBlur           | Blur 事件       | `function`           | false     ||
| onChange         | change          | `function(value, e)` |           ||
| onReturn         | 点击虚拟键盘右下角的键触发的事件，在 native 端使用原生事件，web 端使用 keyup 且 charCode = 13 代替。返回值 e {returnKeyType:'类型',value:'输入框的值'} | `function(e)`        | false     ||
| returnKeyType    | 虚拟键盘右下角的文案，目前只在 native 有效            | string| `default` | `default` `go` `next` `search` `send` `done`|
| rows             | multiple = `true` 时，可同时显示的行数          | number| 2         | |
| placeholder      | placeholder 文本| string| -       | |
| placeholderColor | placeholder 颜色，仅 native 有效              | string| '#999999' | |

### 实例方法

* **focus()**

  让 input 获得焦点

* **blur()**

  让 input 失去焦点

* **getValue()**

  获取输入框的值

* **setNativeFormatRule(rules)** [weex 0.17+]

  设置 native 中对实时输入内容格式化的规则，这个方法常用于前端无法解决的 native 双向绑定的场景。

  以下 demo 给出在客户端上信用卡卡号输入时，每输入 4 个数字自动加入一个空格的场景：

  ```js
  const rules={
    formatRule: '/(\\d{4})(?!$)/g',
    formatReplace: '$1 ',
    recoverRule: '/(\\s*)/g',
    recoverReplace: '',
  }
  componentDidMount() {
    if (isWeb) {
      //...
    } else {
      setTimeout(() => {
        this.refs['text-field'] && this.refs['text-field'].setNativeFormatRule(rules);
      }, 500);
    }
  }
  ```