前端判断扫描和输入的方法

最新推荐文章于 2024-08-20 11:29:48 发布
最新推荐文章于 2024-08-20 11:29:48 发布
阅读量223 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShiLiubin_/article/details/127208182
版权

本方法是通过输入时间差来区分扫描和输入，如输入框内容为粘贴而来，则会认定为扫描

handleCodeChange(val){
  if (!this.changePo){
    this.startTime = new Date().getTime();
  }
  const startTime = this.startTime;
  if (val !== this.changePo){
    const endTime = new Date().getTime();
    if (val.length > 1 && endTime - startTime < 30){
      this.handleInquiry()
    }
    this.changePo = val
  }
},
ShiLiubin_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS判断扫描枪扫描与人工输入值问题
泓
07-27 1万+
Untitled Document function $(s){ return document.getElementById(s); } function keytimes(date1,date2){/*計算2時間毫秒差*/ var keyw= '-'; var str1 = date1; var str2 = date2; var array1 = str1.split(k
区分扫描枪输入和键盘输入的实现
weixin_33851429的博客
08-06 3059
最近为公司开发一个生产系统，其中用到扫描枪输入条码，结果发现手头的扫描枪居然是模拟键盘输入将条码数据直接发送到焦点控件中的（USB口的），比如TextBox，而由于业务要求，不允许生产线上员工手工输入，因此我将文本框设为只读，想不到扫描枪也无法输入了。 看来想通过控件的键盘事件去识别扫描枪输入与键盘输入是行不通的。百度了下，也没找到好的解决方案，不过得到了一个通过检测按键间隔来识别是否为人工输入...
WinForm中TextBox 中判断扫描枪输入与键盘输入
11-24 1984
提出问题：在收货系统中，常常要用到扫描枪扫描条码输入到TextBox，当条码无法扫描时，需要手工输入。如果是扫描枪输入时，我们将自动去判读条码，而手工输入时，最终需要加按回车键确认后判读条码。这时候我们就要判断输入设备是手工还是扫描枪。 尝试的方法： 1.将TextBox属性设为ReadOnly=true。结果：无法输入。 2.在TextBox的KeyPress事件中设置属性e.handle=tru
JS判断是键盘输入还是扫码枪输入
chwlallen的专栏
03-13 2989
JS实现扫码枪输入
java 条形码_java条形码的生成与扫描
weixin_36169520的博客
02-12 414
import java.awt.BorderLayout;import java.awt.Component;import java.awt.event.KeyAdapter;import java.awt.event.KeyEvent;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import java...
vue input判断值是扫码枪还是键盘输入
createWrite的博客
08-02 2421
首先了解下为啥要做区分 ：在浏览器端 我们没办法去控制 输入法为中文还是其他状态 这时候 如果在中文情况下我们用扫码枪去扫码可能就会偏离我们的预期 因为中文状态下 enter会用在把输入信息键入输入框而导致不会执行我们绑定的enter事件 （亲身经历 真的是各种找方案解决，有时输入时间差来判断的 有模拟输入框来判断的） 在尝试后 能满足的 也就输入时间差会靠谱些 扫码枪输入的时间间隔一般在8毫秒，偶尔会有16毫秒，而键盘输入一般都在80毫秒以上（大概范围），...
js 获取扫码枪输入数据的方法
11-20
由于扫码枪输入速度通常比手动输入快很多，因此可以通过监听键盘事件来判断输入来源。以下是两种不同的方法来实现这个功能。 ### 方法1：基于`onkeypress`事件监听 首先，我们需要定义一些变量来存储上次按键的...
源程序的输入和扫描.pdf
05-29
【源程序的输入和扫描】是编译器工作流程中的第一步，主要涉及将源代码转换成计算机可理解的形式。在本实验中，学生被要求理解并实现这一过程，包括源程序的输入和扫描子程序的编写。 源程序的输入通常来自键盘、...
JS判断输入的字符串是否是数字的方法(正则表达式)
10-21
对于前端开发者来说，熟练掌握正则表达式可以大幅提高处理表单验证等问题的效率和准确性。 文章最后提到，内容是通过OCR技术扫描转换而来，可能会有识别错误或遗漏。但是在本例中，文章内容已经足够清晰，没有出现...
jquery统计输入文字的个数并对其进行判断
10-26
这是一种常见的前端功能，通过简单的JavaScript代码和jQuery库的辅助，即可实现。 首先，我们需要了解jQuery是什么。jQuery是一个快速、简洁的JavaScript库，它通过减少原生JavaScript代码，简化了HTML文档遍历、...
USB 条码扫描枪和手动输入区分 不用焦点实现
07-17
USB 条码扫描枪和手动输入区分 不用焦点实现
nuxt.js中间件实现拦截权限判断的方法
10-17
在用户提交登录表单后，前端代码会验证输入数据的有效性。如果数据有效，那么前端会通过HTTP请求将登录信息发送到服务器端。服务器端验证成功后，会返回包含Token的数据。前端接收到响应后，将Token保存到Cookie中，...
Vue项目判断Enter回车事件是直接按键盘触发还是扫码枪触发
qq_32868369的博客
06-05 3847
Vue项目判断Enter回车事件是直接按键盘触发还是扫码枪触发 原因叙述：我们知道键盘事件包括keyDown、keyPress和keyUp三个；然后扫码触发的Enter事件是很快的，一般在10毫秒左右，而直接按键盘触发的Enter相对来说比较慢80毫秒左右。在keyDown【按下】的时候，我们记录一个keyDownTime时间，在keyUp【弹起】的时候，我们又记录一个keyUpTime时间，之后两个相减小于30毫秒【keyUpTime-keyDownTime<30】，我们可以判断是扫码触发的还是直接
在js中判断是扫码枪还是手动输入
weixin_50391597的博客
06-29 2480
通过判断第一次按键的时间与按回车之后的时间进行比较 如果相隔大于30,说明是手动输入的(扫码枪的扫码时间一般不会大于30) //输入框内键盘第一次按下的时候开始记录时间 keydown-->按下的过程 $("#输入框id").keydown(function(event){ var twoTime, oneTime; //keypree 键盘每按下一次进入一次 $(this).keypress (.
vue外接扫码枪如何实现
qq_44707976的博客
07-22 2220
【代码】vue外接扫码枪如何实现。
基于Vue3实现扫码枪扫码并生成二维码的代码解析
三拾的博客
04-12 5730
在本文中，我们将介绍如何使用Vue3实现扫码枪扫描条形码或二维码，并将其转换为二维码的过程。
avue-crud 自定义搜索项 插槽
最新发布
qq_31683775的博客
08-20 289
加上 -search 就可以自定义查询项了。
我需要一个前端页面用html和js来编写，页面包含输入框和四个按钮，添加，扫描添加，提交和查询。可以手动添加或者扫描添加，扫描添加会调用相机进行扫描，并将扫描到的值添加到输入框中，输入一个箱号，可以同时添加多次退仓单号，但箱号只能输入一次，当点击添加按钮，会将其展示在表格中，然后有一个提交按钮，只有这个箱号进行提交，才可以进行下一个箱号和退仓单号的添加，最后有一个查询按钮可以进行查询出全部的退仓单号和箱号的数据页面，页面包含数据表格，展示所有已经添加的退仓单号和箱号
05-31
好的，你需要一个前端页面，包含输入框和四个按钮，分别是添加、扫描添加、提交和查询按钮。下面是一个简单的HTML和JavaScript示例代码，可以实现你的需求： ```html <!DOCTYPE html> <html> <head> <title>退仓单号和箱号绑定提交页面</title> </head> <body> <h1>退仓单号和箱号绑定提交页面</h1> <label for="boxNumber">箱号：</label> <input type="text" id="boxNumber"><br><br> <label for="returnNumbers">退仓单号：</label> <input type="text" id="returnNumbers"><br><br> <button id="addButton">添加</button> <button id="scanButton">扫描添加</button> <button id="submitButton">提交</button> <button id="queryButton">查询</button><br><br> <table id="dataTable"> <thead> <tr> <th>箱号</th> <th>退仓单号</th> </tr> </thead> <tbody> </tbody> </table> <script> // 获取页面元素 const boxNumberInput = document.getElementById('boxNumber'); const returnNumbersInput = document.getElementById('returnNumbers'); const addButton = document.getElementById('addButton'); const scanButton = document.getElementById('scanButton'); const submitButton = document.getElementById('submitButton'); const queryButton = document.getElementById('queryButton'); const dataTable = document.getElementById('dataTable').getElementsByTagName('tbody')[0]; // 箱号和退仓单号的映射 const returnNumbersMap = new Map(); // 添加按钮的点击事件 addButton.addEventListener('click', function() { const boxNumber = boxNumberInput.value; const returnNumbers = returnNumbersInput.value; if (!boxNumber || !returnNumbers) { alert('请输入箱号和退仓单号！'); return; } if (returnNumbersMap.has(boxNumber)) { alert('该箱号已经添加过退仓单号！'); return; } // 将退仓单号添加到映射中 returnNumbersMap.set(boxNumber, returnNumbers); // 将数据添加到表格中 const newRow = dataTable.insertRow(-1); const boxCell = newRow.insertCell(0); const returnCell = newRow.insertCell(1); boxCell.textContent = boxNumber; returnCell.textContent = returnNumbers; // 清空输入框 boxNumberInput.value = ''; returnNumbersInput.value = ''; }); // 扫描添加按钮的点击事件 scanButton.addEventListener('click', function() { // 调用相机进行扫描 // 将扫描到的值添加到输入框中 // 代码省略 }); // 提交按钮的点击事件 submitButton.addEventListener('click', function() { const boxNumber = boxNumberInput.value; if (!boxNumber) { alert('请输入箱号！'); return; } if (!returnNumbersMap.has(boxNumber)) { alert('该箱号还未添加退仓单号！'); return; } // 提交数据到后台 // 代码省略 // 清空映射和表格 returnNumbersMap.clear(); dataTable.innerHTML = ''; // 清空输入框 boxNumberInput.value = ''; returnNumbersInput.value = ''; }); // 查询按钮的点击事件 queryButton.addEventListener('click', function() { // 查询所有已经添加的退仓单号和箱号 // 将数据添加到表格中 dataTable.innerHTML = ''; for (const [boxNumber, returnNumbers] of returnNumbersMap) { const newRow = dataTable.insertRow(-1); const boxCell = newRow.insertCell(0); const returnCell = newRow.insertCell(1); boxCell.textContent = boxNumber; returnCell.textContent = returnNumbers; } }); </script> </body> </html> ``` 上面的代码中，我们使用了`Map`来保存箱号和退仓单号的映射关系，并在添加按钮的点击事件中进行了判断，确保每个箱号只能添加一次退仓单号。在提交按钮的点击事件中，我们首先检查该箱号是否已经添加了退仓单号，如果没有则弹出警告框；如果有，则将数据提交到后台，并清空映射和表格。在查询按钮的点击事件中，我们遍历映射中的所有数据，将其添加到表格中展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值