https://github.com/jerray/jk-keyboard

HTML Numeric Keyboard for Mobile (4x4)
https://github.com/jerray/jk-keyboard

Last synced: about 1 year ago
JSON representation

HTML Numeric Keyboard for Mobile (4x4)

• Host: GitHub
• URL: https://github.com/jerray/jk-keyboard
• Owner: jerray
• License: mit
• Created: 2015-12-30T09:09:22.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-09-18T05:17:32.000Z (over 6 years ago)
• Last Synced: 2025-03-30T02:03:37.090Z (about 1 year ago)
• Language: JavaScript
• Size: 62.5 KB
• Stars: 11
• Watchers: 1
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# jk-keyboard

一个为移动端页面设计的HTML数字键盘程序。

![Screenshot](https://raw.githubusercontent.com/jerray/jk-keyboard/master/screenshot/jk-1.gif)

## 用法

### 键盘布局

```html

...



  1

  2

  3

  4

  5

  6

  7

  8

  9

  隐藏

  0

  .

  删除

  确认



```

使用`jk-left-n`和`jk-top-n`设置按键位置。可以使用`jk-height-n`来改变按键高度。

### 初始化

```javascript

(function() {

  var number = document.querySelector('#number');

  JK.start({

    container: '#jk-keyboard',

    decimal: 3,

    open: true,

    onKeyDown: function(value) {

      console.debug('onKeyDown', value);

      // prevent changing

      // if (parseFloat(value) > 1000) {

      //   return false;

      // }

    },

    onKeyUp: function(value) {

      console.debug('onKeyUp', value);

      number.textContent = value;

    },

    onStart: function(keyboard) {

      keyboard.el.querySelector('#keyboard-down').on('click', function() {

        keyboard.close();

      });

      number.addEventListener('click', function() {

        keyboard.open();

      });

    }

  });

})();

```

示例代码参见 `index.html`。需要使用Chrome打开该页面，然后打开开发者工具，激活手机模式。

## License

MIT