web端接收读卡器卡片信息

项目背景

电脑连接读卡器，由web页面读取和处理卡片信息。

读卡器抛出卡片信息流程

1. 卡片贴近或放置到读卡器上
2. 读卡器解析卡片信息，并形成固定格式的字符串，包含的信息有：卡片写入的数据、卡片原数据（id、标识等）。比如身份证包括姓名、身份证号、卡片id、卡片标识，这些数据格式一般是通用的。
3. 读卡器将字符串写入当前设备focus状态的输入框中：比如word，web页面的input标签等
4. 接收到的字符串需要转义才能在js中使用

function ascii2native( str ) {
    return ( str + '' ).replace( /\\u[\da-z]{4}/gi , function( ascii ) {
        return unescape( ascii.replace( /\\/, '%' ) ); // 姓名包含大写时，需要转为小写后才能转换成功
    });
}

不同的读卡器可能会有差异，有的资料里提到可以使用decodeURIComponent（应该是读取身份证姓名时使用，姓名的编码有差异），根据设备的实际情况选择转义方法吧。

web页面接收卡片信息流程

1. 页面添加接收卡片信息的input标签
   1.1 如果不希望input标签在界面上被看见，可以使用定位将标签移到界面外，或者使用透明度0处理。也有说使用hidden属性的，亲测接收不到数据。
2. 侦听input标签的input事件并取值
3. 解析卡片信息并使用

注意事项（坑坑）

一、web页面保证接收到字符的前提有两个：

1. 浏览器处于激活状态，也就是处于前台。因为卡片信息只会抛给当前设备处于前台的界面内。web页面没有能力保证一直处于激活状态，所以能做的只有侦听window的blur和focus，用来给用户做提示。
2. web页面的input标签要一直处于focus状态，可以用setInterval定时器，保证input的focus状态
3. 浏览器处于激活状态下的一些接收不到的场景
   3.1 焦点在地址栏里
   3.2 焦点在F12界面或其他插件等界面

切记：只有input处于focus状态下 且 界面焦点在web页面内范围内，才能顺利接收卡片信息

二、带中文输入法的设备接收到的数据错乱

原因：卡片信息会激活输入法功能，input收到的结果会受输入法影响

解决方法：将input的type属性置为password

input代码

<input type="password" />
// todo 侦听input事件
// todo 侦听window焦点变化事件

本文更新日志

• 2024-01-10，补充：针对身份证姓名unicode编码大写时使用转换小写后再次解码