web浏览器使用ic卡或磁卡读卡器自动弹出页面，参考：web浏览器使用ic卡或磁卡读卡器自动弹出页面 - HelpYourself! - 博客园 (cnblogs.com)
在页面内单独设置一个input框
<el-input ref="myInput" v-model="myInputModel" id="myInput" style="position:fixed;top:-100px;"></el-input>
页面渲染之后，监听：
mounted() {
this.inputTimer = setInterval(() => {
// 如果当前页面没有聚焦的input，则让隐藏的input聚焦
if (!$('input:focus').length) {
this.$refs.myInput.focus();
}
}, 500)
this.$nextTick(() => {
this.$refs.myInput.focus();
document.getElementById('myInput').onblur = () => {
console.log("监听失焦事件-----");
}
document.getElementById('myInput').addEventListener('focus', () => {
console.log("监听聚焦事件-----")
});
});
let _this = this;
window.addEventListener('keydown', e => listenReader(e, _this))
},
监听读卡器刷卡的操作：
listenReader(e) {
let _this = this;
document.onkeypress = (e) => zx(e);
_this.readerSwip = false;
function zx(e) {
_this.nextCode = e.keyCode;// 当前的键码
_this.nextTime = new Date().getTime();// 当前的毫秒数
// 大写字母键值范围 A~Z(a~z): 65~90
// 有时会出现 a~z: 97~122
// 数字键值范围 0~9: 48~57
// 数字键盘上的数字键范围 0~9: 96~105
// if (_this.nextCode >= 48 && _this.nextCode <= 57) {// 只关注数字键
let res = Number(_this.nextTime) - Number(_this.lastTime);
if (_this.lastCode != null && _this.lastTime != null && res <= 20) {// 相差30以内说明是机器刷卡
// console.log('机器刷卡--aa--', res)
_this.handleReaderAction(e);
} else {// 手动在输入
// console.log("手动输入----aa--", res)
}
// 当前的键盘码和时间作为下一次的上一次
_this.lastCode = _this.nextCode;
_this.lastTime = _this.nextTime;
}
},
handleReaderAction函数：
this.readerSwip = true ---- 是读卡器刷卡，不是手动输入;
readerValue ：读卡器读出来的值
handleReaderAction(e) {
if(this.time !== null){
clearTimeout(this.time);
}
this.time = setTimeout(() => {
let value = e.target?.value || '';
this.readerValue = e?.target?.value || '';
this.readerSwip = true;
// 清空上次读卡的值
e.target.value = ''
// 处理刷卡逻辑
this.handleReadCard();
},50)
},
handleReadCard： 处理刷卡逻辑，与自己业务相关代码
标签：刷卡,focus,input,读卡器,监听,页面 From： https://www.cnblogs.com/hahahakc/p/17309914.html