HTML页面中条形码或二维码扫描枪的使用

条形码或二维码扫描枪是一个输入工具，功能与键盘、鼠标相似，与键盘鼠标的区别是扫描枪从条形码或二维码中读取数据，键盘或鼠标需要手动录入数据。

一、使用扫描枪的常用场景是

1.使用扫描枪扫描录入数据，直接保存到后台系统

2.使用扫描枪扫描查询数据并显示出来

二、扫描枪在HTML页面中运用

1.在HTML中使用扫描枪必须有input或者其他输入框

2.在扫描枪进行扫描前，鼠标的焦点需要移动到相应的输入框中

3.扫描枪一般有自动带有enter键（在扫描完自动按下enter键）

三、扫描枪在页面中的使用设计

背景：页面中鼠标经常移动，不方便获取焦点，每一次扫描前需要移动，界面操作变得繁琐；为了解决此问题，以下设计，对使用扫描枪流程进行优化

1.页面加载是同时定位到需要输入框的并获取焦点，使用扫描枪直接即可录入数据

2.使用js监听键盘中的Ctrl键，按下Ctrl键，鼠标定位到需要输入框的并获取焦点

3.获取焦点同时，选择输入框的内容，如果输入框有内容，扫描枪录入数据直接覆盖之前的内容

4.监听输入框的值，扫描枪录入完毕，输入框值变化，同时触发将要执行的事件

5.事件执行完，鼠标重新定位到输入框，并选择输入框内容

四、运用例子

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>键盘按键监听测试</title></head><body>baody<input name="name" placeholder="name" /><input id='birthday' name="birthday" placeholder="birthday" /></body></html>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">$("#birthday").focus();function keyDown(e){//IE内核浏览器if (navigator.appName == 'Microsoft Internet Explorer'){var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode);}else {//非IE内核浏览器var keycode = e.which;var realkey = String.fromCharCode(e.which);}// console.log('按键码:' + keycode +  '字符: ' + realkey);//监听Ctrl键if(keycode==17){$("#birthday").focus();$("#birthday").select();}$("#birthday").change(function(){console.log($(this).val());$("#birthday").select();})} document.οnkeydοwn=keyDown;</script>

HTML页面中条形码或二维码扫描枪的使用相关推荐

android USB摄像头做条形码及二维码扫描（1）
摘要: 1.前言 2.底层配置 3.JNI实现 4.总结 5.BUG及优化记录 android USB摄像头做条形码及二维码扫描(2) 1. 前言公司做的产品基于android开发板搭建的控制系统, ...
【MAUI】条形码，二维码扫描功能
前言本系列文章面向移动开发小白,从零开始进行平台相关功能开发,演示如何参考平台的官方文档使用MAUI技术来开发相应功能. 介绍移动端的扫描条形码.二维码的功能已经随处可见,已经很难找到一个不支持扫 ...
Android直播带货系统中如何实现二维码扫描功能
自李佳琦的出现将直播带货成功的引向了"巅峰",为了响应众平台和用户的需求,开发Android直播带货系统成为当下的开发热潮.那么在平时的直播软件中,登录.分享.支付等场景中经常出现 ...
页面中生成图形二维码
今天想弄个生成图形二维码的功能,后来网上搜了下,在原有基础上进行验证,有如下几个网址提供的api可供使用. <div class="qr"><img src=&q ...
Android中可通过二维码扫描，直接显示个人名片信息，而且可以点击添加，调用系统的添加联系人功能
微信小程序出来后,出来了一个快速发名片的小程序,他会根据用户的信息生成一张二维码图片,用户扫描之后,就会读取二维码里面的数据,之后调用系统的名片展示界面,之后就可以添加联系人了.开始看到时,还挺好奇的 ...
二维码扫描和应用跳转
转载自: http://sindrilin.com/ios-dev/2015/11/01/二维码扫描和应用跳转.html 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫 ...
iOS开发-二维码扫描和应用跳转
iOS开发-二维码扫描和应用跳转序言前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
ios客户端学习-二维码扫描和应用跳转
转载至链接:http://sindrilin.com/ios-dev/2015/11/01/二维码扫描和应用跳转.html 序言在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
iOS - 二维码扫描和应用跳转
序言前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...
iOS 自带二维码扫描功能的实现
#自从iOS7以后中新增了二维码扫描功能.因此可以在不借助第三方类库的情况下简单的写出二维码的扫描功能: 原生的二维码扫描功能在AVFoundation框架下,所以在使用原生的二维码扫描功能时要先导入 ...

HTML页面中条形码或二维码扫描枪的使用

HTML页面中条形码或二维码扫描枪的使用相关推荐

最新文章

热门文章