keypad-easy
下载
npm install keypad-easy --save
使用说明
Component { super; thisstate = value: '' ; } { KeypadEasy { this }; KeypadEasy { console }; KeypadEasy { console }; KeypadEasy { console }; KeypadEasy } { return <div> <h2>keypad-easy</h2> <div style=height: '30px' borderBottom: '1px solid #ddd' margin: '10px' onClick= { KeypadEasy; }>thisstatevalueusername</div> <div style=height: '30px' borderBottom: '1px solid #ddd' margin: '10px' onClick= { KeypadEasy; }>thisstatevaluepassword</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 实现