# MiniProgramCustomKeyboard

**Repository Path**: shenyupengx/mini-program-custom-keyboard

## Basic Information

- **Project Name**: MiniProgramCustomKeyboard
- **Description**: 微信小程序-自定义车牌号输入键盘
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 20
- **Forks**: 2
- **Created**: 2021-12-17
- **Last Updated**: 2024-12-18

## Categories & Tags

**Categories**: weixin-lapp

**Tags**: None

## README

# MiniProgramCustomKeyboard

#### 介绍
微信小程序-自定义车牌号输入键盘，支持普通蓝牌、新能源绿牌；车牌号输入框自动跳格，循环输入，任意位置作为起始输入

#### 组件功能
* custom-keyboar：自定义键盘对外公布的事件、方法
  * 【event】click：点击按键，抛出按键内容
  * 【event】delete：点击backspace
  * 【method】show：显示键盘（SlideUp）
  * 【method】hide：隐藏键盘（SlideDown）
* custom-car-number-input：自定义车牌号输入框对外公布的事件、方法
  * 【event】focus：输入框获得焦点，抛出当前输入框所在索引值
  * 【method】change：更改输入框内容，参数类型：
      ```javascript
      {
        value: String,  //更改内容
        index: Number,  //更改目标输入框索引
        remove: Boolean //是否为backspace“删除”操作
      }
      ```
#### 使用说明
1.  页面或全局引入组件：custom-keyboar、custom-car-number-input
1.  页面引入组件：custom-keyboar、custom-car-number-input
2.  指定组件id、指定组件事件监听函数
3.  获取组件实例，调用组件内部方法

#### 功能截图
> <img src="screenshots/1.jpg" alt="省份简称" width="40%"/>
> <img src="screenshots/2.jpg" alt="普通蓝牌" width="40%" />
> <img src="screenshots/3.jpg" alt="新能源绿牌" width="40%" />
> <img src="screenshots/4.jpg" alt="获取车牌" width="40%" />