weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
64 lines (50 loc) • 2.48 kB
Markdown
# BaseInput
* category: Components
* chinese: 基础输入框
* type: 基本
---
## API
### Props
| Props | Description | type | default | Accepted Values |
| ---------------- | ------------------ | -------------------- | --------- | --------------- |
| 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);
}
}
```