fish-unclekeypad-easy
下载
npm install keypad-easy --save使用说明
import KeypadEasy from 'keypad-easy'
class Demo extends React.Component {
constructor() {
super();
this.state = {
value: ''
};
}
componentDidMount() {
KeypadEasy.onChange = (value) => {
this.setState({value})
};
KeypadEasy.onClick = (a) => {
console.log(a)
};
KeypadEasy.onShow = _ => {
console.log('show')
};
KeypadEasy.onHide = _ => {
console.log('hide')
};
KeypadEasy.init({
maxLength: 5
})
}
render() {
return (
<div>
<h2>keypad-easy</h2>
<div style={{height: '30px', borderBottom: '1px solid #ddd', margin: '10px'}} onClick={_ => {
KeypadEasy.show('username', {message: '用户名'});
}}>{this.state.value.username}</div>
<div style={{height: '30px', borderBottom: '1px solid #ddd', margin: '10px'}} onClick={_ => {
KeypadEasy.show('password', {message: '密码'});
}}>{this.state.value.password}</div>
</div>
);
}
}API
init(options)
初始化键盘区
|参数名|描述|字段类型|默认值| |--|--|--|--| |title|键盘标题|String|'安全键盘'| |message|键盘当前输入框的描述|String|''| |show|键盘显示/隐藏|Boolean|false| |keys|键盘9宫格布局|Array|[[1, 2, 3], [4, 5, 6], [7, 8, 9], ['', 0, 'backspace']]| |maxLength|键盘当前输入框的最长字段|Boolean/Number|false| |name|键盘当前输入框的name,类似于input的name属性|String|'default'| |needPadding|键盘底部兼容自动添加paddingBottom|Boolean|true|
KeypadEasy.init({ title:'xx安全键盘' })onChange
键盘输入值变化回调
KeypadEasy.onChange = (value) => { // value 中存着不同 name 属性的所有的值 console.log(value.default) }onClick 九宫格键盘点击回调
KeypadEasy.onClick = ({type,value}) => { // type insert/delete // value 当前按钮值 };onShow
九宫格唤起回调
KeypadEasy.onShow = name => { // 类似于input的name属性 };onHide 九宫格隐藏回调
KeypadEasy.onHide = name => { // 类似于input的name属性 };
效果展示
注意
手机唤起假键盘时，如输入区域位于底部，插件会自动添加一个等同键盘高度的 paddingBottom 如需滚动到最底部可通过，onShow 实现