实现扫描条形码，自动弹出相应用户信息的对话框

朴灿烈づ我的快乐病毒、 2022-08-13 00:53 116阅读 0赞

首先想到是不是使用java代码来读取条形码，试了一下，java代码可以读取条形码内容，代码就不放出来了，但是想到了一个问题，在一个web应用中好像无法直接通过java代码直接来读取扫描到的条形码信息，跟web打交道的首先是浏览器，是页面，这个条形码的信息我是无法直接搞到java后面来处理了，因为这个条形码一扫描就相当于是一个键盘的输入，看了一下条形码的说明说，有其他的输出方式，但都不太懂，有串口模式，还有0CIA模式还有MAC模式。这些我都看不太懂，所以只能通过javascript来监听这个键盘的输入事件了。这里如果有更好的方法，请大神指教了。

确定了使用javascript来读取条形码的键盘输入事件，那么先的学习一下怎么使用javascript来监听键盘事件。

有困难找百度，其实我是先搜索了一下百度，找了两个例子，先跑起来看看效果，如下：

function keyDown() {
    	    var keycode = event.keyCode;
    	    var realkey = String.fromCharCode(event.keyCode);
    	　     		alert("按键码: " + keycode + " 字符: " + realkey);
    	}
    	document.onkeydown = keyDown;

这个可以实现一个效果，那就是你输入键盘上的按钮，自动弹出他的keyCode码和实际你按的是键盘上的哪个键。然后又找了一个例子：

<input type="text" />
    	<input type="button" value="清空记录" οnclick="$('content').innerHTML = '';keystring = '';" />
    	<br />请按下任意键查看键盘响应键值：
    	<span id="content"></span>

在此说一下，这两个例子都是我百度来的，由于文档是后写的，一开始也忘了是哪儿找的了，没有加链接，希望别告我啊，哈哈。这个就是你在输入框中输入什么字符都能识别出来，可以看的出来是用全局变量记录当前键盘输入的内容的。

做了一下简单的了解了，也有了一个大概的印象，可以看看文档了。

上w3cschool上查找一下文档，首先找到了HTML DOM Event对象，这里面列出了一些能够触发浏览器事件的属性名称，其中找到跟键盘有关的属性有：onkeydown、onkeypress、onkeyup这三个属性。这三个属性的含义如下：

onkeydown：某个键盘按键被按下。

onkeypress：某个键盘按键被按下并松开。

onkeyup：某个键盘按键被松开。

按照三个解释来看，我认为如果按下一个按键，触发的顺序为onkeydown->onkeypress->onkeyup，下面做个试验来试一下：

通过这个简单的例子，可以得出结论确实如上面预想的一样，但是如果有onkeydown和onkeypress的话，onkeyup就不会执行。

想了一下目前我项目所需要的情况，通过扫枪，扫描条形码，目前我可以理解成一个键盘输入，这个输入的地方是在系统内的任意一个界面中，当写这段话的时候我想到了登录如果超时的情况，这个可以以后进行考虑，可以做定时页面刷新，还可以在扫描之后先进行登录判断也是可以的，目前就是在普通的页面上进行键盘输入，不是输入框，也不是什么其他的内容，就是当前的界面中，所以这次实现，就应该像上面那个例子一样，在document对象中调用，document代表了当前的网页。但是如果我想要整个网站都能够监听这个事件，那么只能做成全局的，而且每个页面都得加载，这里就有个问题，和其他的输入如何区分，一开始我想了很久，会不会和一些输入框什么的冲突，通过实践来证明，不管是什么，只要是有键盘的输入都会激活这个事件，所以我先做一个简单的例子，那就是当扫描枪扫描过后，弹出对话框，对话框中可以显示扫描到的内容。

写了一个小例子，