js web端扫码枪对接

假设二维码地址为：https://www.xxx.com?id=SYM123456789

如下是扫码枪扫码后的效果：

需求：同一个二维码

1.通过微信扫码后进入H5页面；

2.web端使用扫码枪扫码后我们只需要后12位（SYM123456789），并且这12位也可以通过手动输入；

怎么做呢？

第二个问题，如果不做任何处理的话，输入框聚焦后通过扫码枪扫码后的数据肯定是

和我们的预期效果不一致我只需要后12位 SYM123456789

这里是我自己想到的一种解决方案>>>

html部分

<!-- 注：因为扫码枪扫码时 如果是中文的输入环境会有输入法的影响 所以在扫码枪环境下 将type切换到password可以屏蔽输入法 --><el-input  :value="sourceCode" @input="inputCode" :type="isScan?'password':'text'" placeholder="溯源码" />

js部分

<script>export default {data() {return {isScan: false,//是否为扫码枪录入sourceCode: ''}},created() {this.scanCode()},methods: {openCodeListDialog(row) {this.$refs.codeList.open(row)},/* 监听输入 判断通过isScan判断 */inputCode(v) {if (this.isScan) return;this.code = v},//处理扫码枪获取的数据dealScan(code) {this.isScan = falsethis.sourceCode = code.substring(code.length - 12);//取出后12位 },scanCode() {let lastTime = null;let nextTime = null;let code = '';let timer = ''//监听数据录入 通过判断输入数据的速度来判读是手动输入还是扫码枪录入,//这里有一个问题 当用户同时按下两个按键或者故意以高速录入数据时也会被判定为扫码枪输入document.onkeydown = e => {let keycode = e.keyCode || e.which || e.charCode;nextTime = new Date();if (keycode === 13) {if (lastTime && (nextTime - lastTime < 30)) {// 扫码枪this.dealScan(code)} else {// 键盘console.log('键盘输入')}code = '';lastTime = null;e.preventDefault();} else {if (!lastTime) {code = String.fromCharCode(keycode);} else {if (nextTime - lastTime < 30) {code += String.fromCharCode(keycode);item.isScan = true} else {code = '';item.isScan = false}}lastTime = nextTime;}//添加定时器 防止用户输入过快导致的误判 timer = setTimeout(_ => {clearTimeout(timer)this.isScan = false}, 100)};},},
}</script>

js web端扫码枪对接相关推荐

vue 扫码枪扫码墩扫码器中文输入影响大小写影响解决方案 js web端扫码枪对接前端扫码枪 html扫码枪 vue扫码枪
# vue3 扫马枪/扫马墩/扫码器中文输入影响大小写影响解决方式 ## ps 你们觉得好用的话,能不能给我点个赞啊
论文研读-图可视化-NetV.js:Web端可视化工具库
NetV.js:一个基于网络的用于大规模图和网络的高效可视化的库 1 论文概述 1.1 文章摘要 1.2 引言 1.3 文章脉络 2 相关工作 3 设计 3.1 设计要求 3.2 设计细节 3.2.1 ...
JS - Web端的点九图
顾名思义,就是跟安卓的点九图类似,将一张图片切割成9部分,固定四周四个角,其他部分可拉伸,这里仅作一个记录,具体可看官方文档一.点九图 "点九"是andriod平台的应用软件开发 ...
Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
H5分享页面（1）——web端二次分享配置内容
在H5分享页面中,如果用户进行了二次分享,需要进行一些配置才能进行使用,如微信二次分享就必须调用微信的JS-SDK来完成.下面对分享配置代码进行了封装: 存放路径:public/resources/j ...
fastclick.js移动端WEB开发，click,touch,tap事件浅析
建议看看:http://www.cnblogs.com/yexiaochai/p/3442220.html 一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 ...
使用ros3d.js实现web 端3D建图
使用ros3d.js实现web 端3D建图使用ros3d.js实现web 端3D建图前端资源下载: ros3d地图与小车模型显示-机器学习文档类资源-CSDN下载
使用ros2d.js实现web端导航
使用ros2d.js实现web端导航前端资源下载: ros2d地图显示导航校准-机器学习文档类资源-CSDN下载
移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
Node.js Web 模块(客户端服务端实例)
Node.js Web 模块 Web 应用架构 Client - 客户端,一般指浏览器,浏览器可以通过 HTTP 协议向服务器请求数据. Server - 服务端,一般指 Web 服务器,可以接收客户 ...

js web端扫码枪对接

js web端扫码枪对接相关推荐

最新文章

热门文章