<!-- 在 body 底部引入脚本 -->
<script src="js/keypad.js"></script>
<script>
  // 可以在 Keypad 的全局变量上设置 isMobile 来为所有实例提供移动端检测
  Keypad.isMobile = /Mobile/.test(navigator.userAgent)
</script>

不需要任何额外的参数就可以将一个初始状态的“键盘”载入到页面中，点击动作栏的按钮操作显示/隐藏。

// 使用 new 操作符得到一个实例
var kypd = new Keypad()

kypd.toggle() // 切换
kypd.show() // 显示
kypd.hide() // 隐藏

激活下面的输入框触发键盘。提示： Keypad 不会阻止移动端浏览器对于 input 元素的默认事件而导致行为或者 显示异常（放大输入框、元素漂移），需要避免这种的话建议设置 'readonly'，具体参考下一示例。

// 使用 new 操作符得到一个实例
var kypd = new Keypad({
  // 需要监听的 input 元素选择器
  el: '#listened-input'
})

点击下面的六位数密码框会激活键盘，输入的值则会被存入它下方那个只读属性的 input 中。

var password = document.querySelector('#password')
var items = password.querySelectorAll('i')

var input = document.querySelector('#readonly-input')
var kypd = new Keypad({
  // 绑定目标 input 元素
  input: input,
  // 绑定按键抬起状态
  onend: function (key) {
    var code = key[2] // 按键命令
    var n = input.value.length + 1

    // 当前按下的是退格键时
    if (code === 'backspace') {
      n--

      if (n === 0) return kypd.hide()
      if (n > items.length) n = items.length - 1

      items[n - 1].classList.remove('on')

      return false
    }

    if (n > items.length) {
      kypd.hide()
      return true
    }

    if (n === items.length) {
      items[n - 1].classList.add('on')
      return kypd.hide()
    }

    items[n - 1].classList.add('on')
  }
})

// 点击密码框显示键盘
password.addEventListener('click', ev => kypd.show(), false)

在此页面进行一些选项的演示，可结合浏览器的控制台查看对应的 HTML 结构。

按键名称：

等待……

按键值：

等待……

按键命令：

等待……

主题颜色

控制显示

切换键盘

// 使用回调函数的方式配置选项来实例化 Keypad
var kypd = new Keypad(function (options) {
  options.dark = true // 使用深色主题
  options.name = 'qwer' // 键盘布局修改为 QWER
  options.hide = 'click' // 绑定 body 的 'onclick' 事件，点击键盘区域以外的页面部分隐藏

  // 绑定按键按下状态
  options.onstart = function (key) {
    id('options-print-1').textContent = key[0] // 文本
    id('options-print-2').textContent = key[1] // 值
    id('options-print-3').textContent = key[2] // 命令
  }

  // 返回修改后的选项
  return options
})

var theme = {
  dark: id('theme-color-1'),
  light: id('theme-color-2')
}

Object.entries(theme).forEach(function (action) {
  var name = action[0]
  var target = action[1]

  target.addEventListener('click', function (ev) {
    ev.stopPropagation()

    target.querySelector('input[name]').click()

    kypd.dark(name === 'dark')
  }, false)
})

var control = {
  toggle: id('control-1'),
  show: id('control-2'),
  hide: id('control-3')
}

Object.entries(control).forEach(function (action) {
  var name = action[0]
  var target = action[1]

  target.addEventListener('click', function (ev) {
    ev.stopPropagation()

    // 获取当前选择的布局
    var layout = document.querySelector('input[name="layout"][checked]').value

    kypd[name](layout)
  }, false)
})

var layout = {
  number: id('layout-1'),
  qwer: id('layout-2')
}

Object.entries(layout).forEach(function (action) {
  var name = action[0]
  var target = action[1]

  target.addEventListener('click', function (ev) {
    ev.stopPropagation()
    target.querySelector('input[name]').click()

    // 隐藏上一个布局并显示新的
    kypd.hide() || kypd.show(name)
  }, false)
})

function id (id) {
  return document.querySelector('#' + id)
}