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高度以指定键盘组件的高度 |