项目背景
电脑连接读卡器,由web页面读取和处理卡片信息。
读卡器抛出卡片信息流程
- 卡片贴近或放置到读卡器上
- 读卡器解析卡片信息,并形成固定格式的字符串,包含的信息有:卡片写入的数据、卡片原数据(id、标识等)。比如身份证包括姓名、身份证号、卡片id、卡片标识,这些数据格式一般是通用的。
- 读卡器将字符串写入当前设备focus状态的输入框中:比如word,web页面的input标签等
- 接收到的字符串需要转义才能在js中使用
function ascii2native( str ) {
return ( str + '' ).replace( /\\u[\da-z]{4}/gi , function( ascii ) {
return unescape( ascii.replace( /\\/, '%' ) ); // 姓名包含大写时,需要转为小写后才能转换成功
});
}
不同的读卡器可能会有差异,有的资料里提到可以使用decodeURIComponent
(应该是读取身份证姓名时使用,姓名的编码有差异),根据设备的实际情况选择转义方法吧。
web页面接收卡片信息流程
- 页面添加接收卡片信息的input标签
1.1 如果不希望input标签在界面上被看见,可以使用定位将标签移到界面外,或者使用透明度0处理。也有说使用hidden属性的,亲测接收不到数据。 - 侦听input标签的input事件并取值
- 解析卡片信息并使用
注意事项(坑坑)
一、web页面保证接收到字符的前提有两个:
- 浏览器处于激活状态,也就是处于前台。因为卡片信息只会抛给当前设备处于前台的界面内。web页面没有能力保证一直处于激活状态,所以能做的只有侦听window的blur和focus,用来给用户做提示。
- web页面的input标签要一直处于focus状态,可以用setInterval定时器,保证input的focus状态
- 浏览器处于激活状态下的一些接收不到的场景
3.1 焦点在地址栏里
3.2 焦点在F12界面或其他插件等界面
切记:只有input处于focus状态下 且 界面焦点在web页面内范围内,才能顺利接收卡片信息
二、带中文输入法的设备接收到的数据错乱
原因:卡片信息会激活输入法功能,input收到的结果会受输入法影响
解决方法:将input的type属性置为password
input代码
<input type="password" />
// todo 侦听input事件
// todo 侦听window焦点变化事件
本文更新日志
- 2024-01-10,补充:针对身份证姓名unicode编码大写时使用转换小写后再次解码