Vehicle-keyboard-js NPM

vehicleKeyboard

普通车牌和新能源车牌

中文键盘

中文键盘

英文键盘

英文键盘

适用范围

使用 flex 自动布局，适用于多端
中英文键盘都可根据自己的需求定义
可模块化导入
可以浏览器中直接引入

安装

npm install vehicle-keyboard-js

你也可以通过cdn引入

<script src="https://unpkg.com/vehicle-keyboard-js@1.0.14/lib/Keyboard.min.js"></script>

使用方法

如果是使用vue的话，需要在mounted下执行初始化操作

html页面设置

<!-- 外层的盒子名称都可自己定义 -->
<!-- 和js的boxName、entryInputNa名称对应即可 -->
<div class="inp"></div>
<div class="keyboard"></div>

键盘初始化

//虽然样式名称还是keyborad但是调用时已经修改为Keyboard
//1.1显示写的输入框
let keyboard = new Keyboard({
    boxName: ".keyboard",
    writeBoxName:".inp"
});

//1.2或者使用内置创建的输入框
let keyboard = new Keyboard({
    boxName: ".keyboard",
    entryInputNa:".inp",
    pageVehicleSplit:"鄂j401",//页面传的车牌
    keyboardFn:()=>{},//键盘点击回调事件
    backpaceFn:()=>{},//键盘backpace点击回调事件
});

//2. 初始化生成键盘
// 在执行初始化的时候如果是使用vue的话，需要在mounted下执行初始化操作
keyboard.init();

new Keyboard(params:object) 传的参数

boxName 放置键盘盒子的名称-String-必填项；
entryInputNa放置键盘输入框名称-String-非必填项（writeBoxName 为空时，必填）,不能是 input 框，应该为一个盒子；
writeBoxName存键盘操作的值的 input 或者盒子-String-非必填项（entryInputNa为空时，必填）；
chArray有自己的默认值，显示中文车牌-Array-非必填项；
enArray有自己的默认值，显示字母和数字-Array-非必填项；
keyboardShowRowNum键盘排列几行，默认显示 5 行-Int-非必填项；
pushCh可以往原有的中文键盘中添加自己的中文-Array-非必填项；
pushEn可以往原有的字母和数字键盘中添加自己的字母和数字-Array-非必填项；
inputLen现实几个键盘输入框，默认是 9 个(其实显示出来是 8 位的车牌)，带中间一个点-Int-非必填项；
keyboardFn点击键盘的回调函数，没有返回值，只有回调，-Function-非必填项；
pageVehicleSplit: "页面中传来的部分车牌，String-非必填项；
enabledCh: "需要禁用的中文键-Array-非必填项"；
enabledEn: "需要禁用的英文键-Array-非必填项"；
externalKeyboard:是否启用内置键盘-Boolean-非必填项，entryInputNa存在时才起作用,(开启原生自带键盘输入的方式)；