移动端必备！开源数字键盘库numeric-keyboard

@微信公众号：Linux技术宅 #开源推荐

一、项目简介

numeric-keyboard 是一个专为移动端浏览器设计的虚拟数字键盘库，支持 原生 JavaScript、React、Vue、Angular 等主流框架。其核心功能包括：

虚拟输入框：替代原生输入框，避免系统键盘弹出，支持光标操作。高度可定制：支持自定义布局、主题、按钮功能（如清除、确认）。多平台兼容：适配 Web 和移动端（iOS/Android），响应式设计。安全输入：防止键盘记录器窃取密码等敏感信息。

适用场景：

支付密码输入金额/验证码填写电话号码/身份证号输入任何需要数字输入的表单字段

二、部署与安装

1. 通过 npm/yarn 安装（推荐）


npm install numeric-keyboard  
# 或  
yarn add numeric-keyboard

2. 手动引入（CDN 或本地文件）

原生 JS 版本：


<link rel="stylesheet" href="path/to/numeric-keyboard.css">  
<script src="path/to/numeric-keyboard.js"></script>

React/Vue/Angular 版本：需从 dist 目录引入对应组件（如 numeric_keyboard.vue.js）。

3. Webpack 配置（React/Vue 项目）

确保正确解析组件路径：


// webpack.config.js  
resolve: {  
  alias: {  
    'numeric-keyboard$': 'numeric-keyboard/dist/numeric_keyboard.vue.js' // Vue 示例  
  }  
}

三、使用示例

1. 原生 JavaScript


<input type="text" id="inputField" placeholder="点击输入数字">  
<script>  
  const input = document.getElementById('inputField');  
  const keyboard = new NumericInput({  
    type: 'number',  
    placeholder: '请输入金额',  
    onInput: (value) => console.log('当前值:', value),  
    enterText: '确认' // 自定义确认键文本  
  }).mount(input);  
</script>

2. React


import { NumericInput } from 'numeric-keyboard';  

function App() {  
  const handleInput = (value) => {  
    console.log('输入值:', value);  
  };  

  return (  
    <div>  
      <NumericInput  
        type="tel" // 电话键盘布局  
        placeholder="输入手机号"  
        onInput={handleInput}  
        format={/^d*$/} // 限制仅数字输入  
      />  
    </div>  
  );  
}

3. Vue


<template>  
  <div>  
    <NumericInput  
      v-model="amount"  
      placeholder="输入金额"  
      :maxlength="6"  
      @enterpress="handleConfirm"  
    />  
  </div>  
</template>  

<script>  
import { NumericInput } from 'numeric-keyboard';  

export default {  
  components: { NumericInput },  
  data() {  
    return { amount: '' };  
  },  
  methods: {  
    handleConfirm() {  
      alert(`确认输入: ${this.amount}`);  
    }  
  }  
};  
</script>

4. Angular


import { Component } from '@angular/core';  

@Component({  
  selector: 'app-root',  
  template: `  
    <numeric-input  
      type="number"  
      placeholder="输入验证码"  
      [(ngModel)]="code"  
      (enterpress)="onConfirm()"  
    ></numeric-input>  
  `  
})  
export class AppComponent {  
  code: string = '';  

  onConfirm() {  
    console.log('验证码:', this.code);  
  }  
}

四、核心配置选项

选项	类型	默认值	说明
`type`	String	`'number'`	输入类型：`'number'`（数字）或 `'tel'`（电话）
`layout`	Array/String	`'number'`	自定义键盘布局（如 `[['1','2','3'], ['4','5','6']]`）
`format`	RegExp/Function	–	限制输入格式（如 `/^d{6}$/` 限制 6 位数字）
`enterText`	String	`'enter'`	确认键文本
`autofocus`	Boolean	`false`	自动聚焦输入框

五、事件监听

input：输入值变化时触发。enterpress：按下确认键时触发。focus/blur：输入框聚焦/失焦时触发。

六、开源地址与资源

GitHub 仓库：
https://github.com/viclm/numeric-keyboard文档与示例：
仓库内 README.md 包含详细 API 说明。examples/ 目录提供完整代码示例。 HelloGitHub 收录：
https://hellogithub.com/repository/viclm/numeric-keyboard

七、优势与对比

特性	`numeric-keyboard`	其他库（如 `simple-keyboard`）
移动端优化	✅ 专为触屏设计	❌ 多为桌面端优化
框架支持	✅ React/Vue/Angular/原生 JS	⚠️ 部分仅支持 React
自定义布局	✅ 支持复杂布局	✅ 需额外配置
体积	📦 轻量（核心代码 <50KB）	📦 较大（依赖较多）