nuke-base-input
v2.3.12
Published
基础输入框
Downloads
25
Readme
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 个数字自动加入一个空格的场景:
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); } }