React Number Input Mobile

React 移动端数字输入框组件

安装

npm install react-number-input-mobile --save

使用

import React from 'react'
import ReactDom from 'react-dom'
import NumberInput from 'react-number-input-mobile'

class Demo extends React.Component {

  render() {

    return (
      <div className="demo">
        <NumberInput 
          skin="numer-field"
          placeholder="哈哈哈"
          type="id"
          onMatch={::this.handleMatch}
          keyboard={{
            skin: 'bar',
            height: '40%'
          }}
        />
      </div>
    )

  }

}

ReactDOM.render(<Demo />, document.querySelector('#root'))

该示例已经包含在git项目中，要亲自感受，可以clone此项目，然后在项目目录执行以下命令

npm i && npm run example
open http://localhost:5998

组件属性

| 属性名 | 类型 | 说明 | | ---------------------- | ------------- | :----- | | skin | String | 会作为class属性附加到输入框组件的DOM元素上，可用于自定义输入框组件的样式 | | id | String | 会作为id属性附加到输入框组件的DOM元素上，如果页面需要多处使用此组件，请勿传相同的值 | | placeholder| String | 输入框为空时的占位文字 | | showCursor| Boolean | 是否显示光标，默认true | | type| String | 输入框类型，目前支持传入'id'(身份证号码)和'number'(普通数字)，或者不传 | | symbol| String | 指定键盘组件左下角按钮对应的输入字符，当指定type属性为'id'或者'number'时，symbol强制为'X'或者'.'，为null时，不显示任何符号 | | decimal| Integer | 小数点后的位数限制 | | maxLength| Integer | 输入的最大位数限制 | | max| Number | 输入的最大数值限制 | | onChange| function | 当用户输入有效值时候的回调方法，参数为输入值，在该回调中return false可以阻止用户输入| | blur | function | 让组件失去焦点 | | focus | function | 让组件获得焦点 | | keyboard| Object | 可以简单自定义该输入框组件对应的键盘组件| | keyboard.skin| String| 会作为class属性附加到键盘组件的DOM元素上，可用于自定义键盘组件的样式 | | keyboard.height | String | 传入一个有效的CSS高度以指定键盘组件的高度 |