Skip to content
HTML Numeric Keyboard for Mobile (4x4)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshot
test
.gitignore
LICENSE
README.md
index.html
jk-keyboard.css
jk-keyboard.css.map
jk-keyboard.js
jk-keyboard.scss
package.json

README.md

jk-keyboard

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

Screenshot

用法

键盘布局

<link rel="stylesheet" href="./jk-keyboard.css">
...

<div id="jk-keyboard" class="jk-keyboard">
  <a class="jk-key jk-left-0 jk-top-0" data-code="1"><span>1</span></a>
  <a class="jk-key jk-left-1 jk-top-0" data-code="2"><span>2</span></a>
  <a class="jk-key jk-left-2 jk-top-0" data-code="3"><span>3</span></a>
  <a class="jk-key jk-left-0 jk-top-1" data-code="4"><span>4</span></a>
  <a class="jk-key jk-left-1 jk-top-1" data-code="5"><span>5</span></a>
  <a class="jk-key jk-left-2 jk-top-1" data-code="6"><span>6</span></a>
  <a class="jk-key jk-left-0 jk-top-2" data-code="7"><span>7</span></a>
  <a class="jk-key jk-left-1 jk-top-2" data-code="8"><span>8</span></a>
  <a class="jk-key jk-left-2 jk-top-2" data-code="9"><span>9</span></a>
  <a class="jk-key jk-left-0 jk-top-3" id="keyboard-down">隐藏</a>
  <a class="jk-key jk-left-1 jk-top-3" data-code="0"><span>0</span></a>
  <a class="jk-key jk-left-2 jk-top-3" data-code="."><span>.</span></a>
  <a class="jk-key jk-left-3 jk-top-0 jk-height-1" data-code="backspace">删除</a>
  <a class="jk-key jk-left-3 jk-top-2 jk-height-1 submit disabled jk-text" id="submit"><span>确认</span></a>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./jk-keyboard.js"></script>

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

初始化

(function() {
  var $number = $('#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.text(value);
    },
    onStart: function(keyboard) {
      keyboard.$el.find('#keyboard-down').on('click', function() {
        keyboard.close();
      });
      $number.on('click', function() {
        keyboard.open();
      });
    }
  });
})();

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

License

MIT

You can’t perform that action at this time.