广东网站建设费用seo公司的选上海百首网络
项目背景
通过电脑连接的读卡器读取卡片信息，并由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焦点变化事件