# cphKeyboard

**Repository Path**: north-ming-fish/cphKeyboard

## Basic Information

- **Project Name**: cphKeyboard
- **Description**: cphKeyboard 是一款基于 jQuery 实现的移动端H5车牌号输入键盘，支持输入新能源车牌号，可以帮您快速填写车牌号。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://kacper.fun/modules/special/cphKeyboard/index.html
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2024-08-23
- **Last Updated**: 2025-06-03

## Categories & Tags

**Categories**: jquery-plugins

**Tags**: 键盘, 车牌号, 车牌号键盘

## README

# cphKeyboard(jQuery移动端车牌号输入键盘)

#### 一、介绍

**cphKeyboard** 是一款基于 jQuery 实现的移动端H5车牌号输入键盘，支持输入新能源车牌号，可以帮您快速填写车牌号。

如果觉得对你有用，顺手点一下star吧~~~

预览： [https://kacper.fun/modules/special/cphKeyboard/index.html](https://kacper.fun/modules/special/cphKeyboard/index.html "车牌号键盘")

#### 二、依赖

jQuery

#### 三、使用说明

##### 1.引入文件

引入 [jquery.min.js](js%2Fjquery.min.js)、[keyboard_2x.js](js%2Fkeyboard_2x.js)、[keyboard.css](css%2Fkeyboard.css) 文件，
[jquery.min.js](js%2Fjquery.min.js) 需要放置在 [keyboard_2x.js](js%2Fkeyboard_2x.js) 之前。

```html
<!-- 引入CSS -->
<link rel="stylesheet" href="css/keyboard.css" type="text/css">
<!-- 引入JavaScript -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/keyboard_1x.js" type="text/javascript"></script>
```

##### 2.使用

```html
<!-- 创建一个div，用来动态生成车牌号输入框 -->
<div id="demo"></div>
```

```javascript
$(function () {
    // 实例化
    let cphKeyboard = new CphKeyboard();
    // 初始化
    cphKeyboard.init({
        elem: "#demo",
        inputCallBack: function (value) {
            console.log('键盘输入：' + value);
        },
        deleteCallBack: function () {
            console.log('触发了删除事件回调！');
        },
        finishCallBack: function (value) {
            console.log('车牌号：' + value);
        }
    });
    // 获取车牌号
    let plateNumber = cphKeyboard.getValue();
});
```

##### 3.参数说明

| 参数             | 类型       | 必填 | 说明                       | 示例值     |
|----------------|----------|----|--------------------------|---------|
| elem           | String   | 是  | 指定元素选择器                  | '#demo' |
| inputCallBack  | function | 否  | 输入事件回调函数，返回参数：当前输入的值     |         |
| deleteCallBack | function | 否  | 删除事件回调函数                 |         |
| finishCallBack | function | 否  | 输入完成回调函数，返回参数：当前已经输入的车牌号 |         |

##### 4.方法

**getValue()** 获取当前车牌

```javascript
// 获取车牌号
let plateNumber = cphKeyboard.getValue();
```

#### 四、演示

![image](demo.gif)