keypad-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 实现