# LicensePlateKeyboard
**Repository Path**: ruan-tian/license-plate-keyboard
## Basic Information
- **Project Name**: LicensePlateKeyboard
- **Description**: 一款专为车牌输入设计的键盘应用，支持快速、准确的车牌号码录入，适用于交通管理、停车系统等多种场景。
- **Primary Language**: JavaScript
- **License**: Zlib
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-06-25
- **Last Updated**: 2025-06-26
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# LicensePlateKeyboard
## 项目介绍
一款专为车牌输入设计的虚拟键盘应用，支持快速、准确的车牌号码录入。该项目采用原生JavaScript开发，具有良好的兼容性和易用性，适用于交通管理、停车系统、车辆管理等多种场景。
## 功能特性
- ✅ **智能省份选择**：支持全国34个省市自治区简称输入
- ✅ **双键盘模式**：省份键盘和字符键盘智能切换
- ✅ **新能源车牌支持**：兼容7位和8位车牌格式
- ✅ **实时验证**：内置车牌号格式验证功能
- ✅ **特殊字符支持**：港澳台、挂牌、领事馆等特殊车牌
- ✅ **响应式设计**：适配移动端和桌面端
- ✅ **API丰富**：提供完整的操作接口
- ✅ **易于集成**：简单的初始化和配置
## 技术架构
### 核心技术栈
- **前端框架**：原生JavaScript (ES6+)
- **UI库**：jQuery 3.x
- **样式**：CSS3 + Flexbox布局
- **架构模式**：面向对象编程 (OOP)
### 项目结构
```
licensePlateKeyboard/
├── index.html # 演示页面
├── carKeyboard/
│ ├── index.bable.js # 核心JavaScript类
│ ├── index.css # 样式文件
│ └── jquery.min.js # jQuery依赖
└── README.md # 项目文档
```
### 核心类设计
**CarKeyboard类**主要包含以下模块：
- **状态管理**：plateState对象管理输入状态
- **UI渲染**：动态生成键盘界面
- **事件处理**：键盘点击、切换等交互
- **数据验证**：车牌格式校验
- **API接口**：对外提供操作方法
## 安装使用
### 1. 直接引入
```html
```
### 2. 基本配置
```javascript
// 基础配置
const options = {
elem: "carKeyboard", // 必需：容器元素ID
isValidated: false // 可选：是否开启车牌格式验证
};
const carKeyboard = new CarKeyboard(options);
```
## API文档
### 构造函数
```javascript
new CarKeyboard(options)
```
**参数说明：**
- `options.elem` (string, 必需)：容器元素的ID
- `options.isValidated` (boolean, 可选)：是否开启车牌验证，默认false
### 实例方法
#### getPlate()
获取当前输入的车牌号
```javascript
// 不开启验证时
const plate = carKeyboard.getPlate();
console.log(plate); // "粤B12345"
// 开启验证时
const result = carKeyboard.getPlate();
console.log(result);
// { isValidated: true, plate: "粤B12345" }
```
#### setPlate(plateNumber)
设置车牌号（回显功能）
```javascript
carKeyboard.setPlate("粤B12345");
```
#### clearPlate()
清空当前输入的车牌号
```javascript
carKeyboard.clearPlate();
```
#### showKeyboard()
显示虚拟键盘
```javascript
carKeyboard.showKeyboard();
```
#### hideKeyboard()
隐藏虚拟键盘
```javascript
carKeyboard.hideKeyboard();
```
#### destroy()
销毁键盘实例，清理事件和DOM
```javascript
carKeyboard.destroy();
```
## 使用示例
### 基础使用
```javascript
// 初始化
const carKeyboard = new CarKeyboard({
elem: "carKeyboard",
isValidated: true
});
// 获取车牌
document.getElementById('getPlate').onclick = function() {
const result = carKeyboard.getPlate();
if (result.isValidated) {
console.log('有效车牌：', result.plate);
} else {
console.log('无效车牌：', result.plate);
}
};
// 设置车牌
document.getElementById('setPlate').onclick = function() {
carKeyboard.setPlate('京A88888');
};
// 清空车牌
document.getElementById('clearPlate').onclick = function() {
carKeyboard.clearPlate();
};
```
### 高级用法
```javascript
// 监听车牌输入变化（需要自定义实现）
class ExtendedCarKeyboard extends CarKeyboard {
inputChar(char) {
super.inputChar(char);
// 触发自定义事件
this.onPlateChange && this.onPlateChange(this.getPlate());
}
}
const keyboard = new ExtendedCarKeyboard({
elem: "carKeyboard",
isValidated: true
});
keyboard.onPlateChange = function(plate) {
console.log('车牌变化：', plate);
};
```
## 支持的车牌格式
### 普通车牌（7位）
- 格式：`省份简称 + 字母 + 5位数字/字母`
- 示例：`粤B12345`、`京A88888`
### 新能源车牌（8位）
- 格式：`省份简称 + 字母 + 6位数字/字母`
- 示例：`粤BD12345`、`京AF88888`
### 特殊车牌
- **港澳车牌**：支持"港"、"澳"字符
- **挂车车牌**：支持"挂"字符
- **领事馆车牌**：支持"领"、"使"字符
- **教练车牌**：支持"学"字符
### 省份简称支持
```
京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领
```
## 浏览器兼容性
- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ iOS Safari 12+
- ✅ Android Chrome 60+
## 开发指南
### 本地开发
1. 克隆项目
```bash
git clone [repository-url]
cd licensePlateKeyboard
```
2. 直接打开index.html即可预览
### 自定义样式
可以通过修改`carKeyboard/index.css`来自定义键盘样式：
```css
/* 自定义车牌字符样式 */
.plate-char {
width: 45px;
height: 55px;
font-size: 22px;
border-radius: 10px;
}
/* 自定义按键样式 */
.key-btn {
background: #007bff;
color: white;
border-radius: 8px;
}
```
## 常见问题
### Q: 如何禁用车牌验证？
A: 在初始化时设置`isValidated: false`
### Q: 如何自定义键盘样式？
A: 修改`carKeyboard/index.css`文件中的相关样式类
### Q: 支持哪些特殊车牌？
A: 支持港澳台、挂车、领事馆、教练车等特殊车牌格式
### Q: 如何监听车牌输入变化？
A: 可以通过继承CarKeyboard类并重写相关方法来实现
## 更新日志
### v1.0.0
- ✨ 初始版本发布
- ✨ 支持基础车牌输入功能
- ✨ 支持省份和字符双键盘
- ✨ 支持新能源车牌
- ✨ 内置车牌格式验证
## 许可证
MIT License
## 贡献指南
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request
## 联系方式
如有问题或建议，欢迎提交Issue或Pull Request。