nuke-base-input

v2.3.12
基础输入框
nuke nuke-base-input

Readme Versions Dependencies Scripts

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);
  }
}
npm i nuke-base-input

Metadata

Downloads