GitHub:https://github.com/viclm/numeric-keyboard
用于手机浏览器的虚拟的可自定义数字键盘,它包含一个可以调起虚拟自定义数字键盘的文本框,支持大部分的 HTML5 标准属性和光标操作。 同时,虚拟键盘本身可以单独和其他自定义输入界面一起使用,比如互联网金融场景常见的数字验证码输入方格。
数字键盘有多个版本:原生 JavaScript、React、Angular 和 Vue
numeric-keyboard(移动端数字键盘) - 图1

安装

通过 Yarn 安装
yarn add numeric-keyboard
配置 Webpack 使用恰当的版本

  1. resolve: {
  2. alias: {
  3. // 以 **Vue** 为例
  4. 'numeric-keyboard$': 'numeric-keyboard/dist/numeric_keyboard.vue.js'
  5. }
  6. },

使用

Vanilla JavaScript

  1. import { NumericInput } from 'numeric-keyboard'
  2. new NumericInput({
  3. type: 'number',
  4. placeholder: 'touch to input',
  5. onInput(value) {
  6. ...
  7. }
  8. }).mount('.input')

React

  1. import { NumericInput } from 'numeric-keyboard'
  2. class App extends React.Component {
  3. input(val) {
  4. ...
  5. },
  6. render() {
  7. return <div className="input">
  8. <label>Amount: </label>
  9. <NumericInput type="number" placeholder="touch to input" onInput={this.input.bind(this)} />
  10. </div>
  11. }
  12. }

选项/属性

虚拟文本框用以替换原生的输入框,所以它支持大部分标准属性,详情可参看 HTML 标准文档。
// 只支持两种输入类型:number 和 tel,默认唤起对应布局的键盘

  1. type: {
  2. type: String,
  3. default: 'number'
  4. },
  5. autofocus: {
  6. type: Boolean,
  7. default: false
  8. },
  9. disabled: {
  10. type: Boolean,
  11. default: false
  12. },
  13. maxlength: {
  14. type: Number
  15. },
  16. name: {
  17. type: String
  18. },
  19. placeholder: {
  20. type: String
  21. },
  22. readonly: {
  23. type: Boolean,
  24. default: false
  25. },
  26. value: {
  27. type: [String, Number]
  28. },
  29. // 使用一个正则表达式或者函数限制输入内容
  30. format: {
  31. type: [String, Function]
  32. },
  33. // 自定义键盘布局
  34. layout: {
  35. type: [String, Array],
  36. default: 'number'
  37. },
  38. // 自定义键盘确认键文案,图标可使用 Iconfont
  39. entertext: {
  40. type: String,
  41. default: 'enter'
  42. }

回调函数/事件

input

当输入发生改变时会触发 input 事件,和原生输入框元素触发的事件不同,响应函数的第一个参数并不是事件对象,而是输入框内文本的值。当使用原生 JavaScript 版本时,使用 onInput() 回调函数代替 input 事件。

enterpress

当按下键盘确认键时会触发 enterpress 事件。

键盘

虚拟数字键盘本身是一个独立的可插拔组件,可自定义布局,通常它需要和一个输入界面一起使用。

使用

Vanilla JavaScript

import { NumericKeyboard } from ‘numeric-keyboard’
new NumericKeyboard(‘.keyboard’, {
layout: ‘tel’,
onPress(key) {

}
})

React

import { NumericKeyboard } from ‘numeric-keyboard’
class App extends React.Component {
press(key) {

}
render() {
return




}
}

选项/属性

// 修改键盘的布局
layout: {
type: [String, Array],
default: ‘number’
},
// 自定义确认键文案,图标可使用 Iconfont
entertext: {
type: String,
default: ‘enter’
}

layout

有两种内置的布局: numbertel 对应两种标准输入类型。 你可以自定义任何布局样式,数字键盘使用一个二维数组构建了一种表格布局,支持单元格合并。

number 布局

numeric-keyboard(移动端数字键盘) - 图2

tel 布局

numeric-keyboard(移动端数字键盘) - 图3

自定义布局

// 内置 number 布局代码示例
import { keys } from ‘numeric-keyboard’
[
[
{
key: keys.ONE
},
{
key: keys.TWO
},
{
key: keys.THREE
},
{
key: keys.DEL,
rowspan: 2,
},
],
[
{
key: keys.FOUR
},
{
key: keys.FIVE
},
{
key: keys.SIX
},
],
[
{
key: keys.SEVEN
},
{
key: keys.EIGHT
},
{
key: keys.NINE
},
{
key: keys.ENTER,
rowspan: 2,
},
],
[
{
key: keys.DOT
},
{
key: keys.ZERO
},
{
key: keys.ESC
},
],
]

回调函数/事件

press

点击键盘按键时会触发 press 事件,响应函数的参数是刚刚点击过的按键。当使用原生 JavaScript 版本时,使用 onPress() 回调函数代替 press 事件。

enterpress

当按下键盘确认键时会触发 enterpress 事件。