javascript 将条形码扫描到特定的文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16296342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scan barcode into a specific textbox
提问by Sriniwas
I am working on bar-code scanners. The bar-code scanner that I am using is a plug-n-play type and scans the code automatically wherever you place the cursor. But what i want is that whether i can scan it to a specific text-box on a web page everytime my scanner reads a code
我正在研究条形码扫描仪。我使用的条码扫描器是即插即用型的，无论您将光标放在何处，它都会自动扫描代码。但我想要的是每次我的扫描仪读取代码时我是否可以将其扫描到网页上的特定文本框
For eg, if my form looks like this
例如，如果我的表单看起来像这样
<input type="text" name="txtItem" id="txtItem" class="m-wrap w-120" tabindex="6">
<input type="text" name="itemId" id="itemId" class="m-wrap w-120" tabindex="6">
<input type="text" name="itemName" id="itemName" class="m-wrap w-120" tabindex="6">
<input type="text" name="itemQty" id="itemQty" class="m-wrap w-120" tabindex="6">
so everytime i scan a code it should always appear in the txtitemtext-box no matter where my current focus is.
所以每次我扫描代码时，txtitem无论我当前的焦点在哪里，它都应该始终出现在文本框中。
Can anybody guide me or help me find a solution here??
有人可以指导我或帮我在这里找到解决方案吗？
回答by PhilM
Some Barcode Scanners act just like another input device. The form cannot tell the difference between information being entered by a keyboard vs. a scanner unless you use a timer to monitor how quickly it is entered.
一些条码扫描器的作用就像另一个输入设备。除非您使用计时器来监控输入的速度，否则该表格无法区分通过键盘输入的信息与通过扫描仪输入的信息之间的区别。
Some scanners "paste" the values in to the focused control - others send each individual key stroke.
一些扫描仪将值“粘贴”到焦点控件中 - 其他扫描仪发送每个单独的击键。
The following JSFiddle is able to detect when input occurs when characters are sent individually on a single control:
以下 JSFiddle 能够检测在单个控件上单独发送字符时何时发生输入：
http://jsfiddle.net/PhilM/Bf89R/3/
http://jsfiddle.net/PhilM/Bf89R/3/
You could adapt this to make it a delegate for the whole form and remove the input from the control it was input into and put it into the correct form.
您可以调整它以使其成为整个表单的委托，并从输入的控件中删除输入并将其放入正确的表单中。
The test html for the fiddle is this:
小提琴的测试 html 是这样的：
<form>
<input id="scanInput" />
<button id="reset">Reset</button>
</form>
<br/>
<div>
<h2>Event Information</h2>
Start: <span id="startTime"></span>
<br/>First Key: <span id="firstKey"></span>
<br/>Last Ley: <span id="lastKey"></span>
<br/>End: <span id="endTime"></span>
<br/>Elapsed: <span id="totalTime"></span>
</div>
<div>
<h2>Results</h2>
<div id="resultsList"></div>
</div>
The Javascript for the sample fiddle is:
示例小提琴的 Javascript 是：
/*
This code will determine when a code has been either entered manually or
entered using a scanner.
It assumes that a code has finished being entered when one of the following
events occurs:
? The enter key (keycode 13) is input
? The input has a minumum length of text and loses focus
? Input stops after being entered very fast (assumed to be a scanner)
*/
var inputStart, inputStop, firstKey, lastKey, timing, userFinishedEntering;
var minChars = 3;
// handle a key value being entered by either keyboard or scanner
$("#scanInput").keypress(function (e) {
// restart the timer
if (timing) {
clearTimeout(timing);
}
// handle the key event
if (e.which == 13) {
// Enter key was entered
// don't submit the form
e.preventDefault();
// has the user finished entering manually?
if ($("#scanInput").val().length >= minChars){
userFinishedEntering = true; // incase the user pressed the enter key
inputComplete();
}
}
else {
// some other key value was entered
// could be the last character
inputStop = performance.now();
lastKey = e.which;
// don't assume it's finished just yet
userFinishedEntering = false;
// is this the first character?
if (!inputStart) {
firstKey = e.which;
inputStart = inputStop;
// watch for a loss of focus
$("body").on("blur", "#scanInput", inputBlur);
}
// start the timer again
timing = setTimeout(inputTimeoutHandler, 500);
}
});
// Assume that a loss of focus means the value has finished being entered
function inputBlur(){
clearTimeout(timing);
if ($("#scanInput").val().length >= minChars){
userFinishedEntering = true;
inputComplete();
}
};
// reset the page
$("#reset").click(function (e) {
e.preventDefault();
resetValues();
});
function resetValues() {
// clear the variables
inputStart = null;
inputStop = null;
firstKey = null;
lastKey = null;
// clear the results
inputComplete();
}
// Assume that it is from the scanner if it was entered really fast
function isScannerInput() {
return (((inputStop - inputStart) / $("#scanInput").val().length) < 15);
}
// Determine if the user is just typing slowly
function isUserFinishedEntering(){
return !isScannerInput() && userFinishedEntering;
}
function inputTimeoutHandler(){
// stop listening for a timer event
clearTimeout(timing);
// if the value is being entered manually and hasn't finished being entered
if (!isUserFinishedEntering() || $("#scanInput").val().length < 3) {
// keep waiting for input
return;
}
else{
reportValues();
}
}
// here we decide what to do now that we know a value has been completely entered
function inputComplete(){
// stop listening for the input to lose focus
$("body").off("blur", "#scanInput", inputBlur);
// report the results
reportValues();
}
function reportValues() {
// update the metrics
$("#startTime").text(inputStart == null ? "" : inputStart);
$("#firstKey").text(firstKey == null ? "" : firstKey);
$("#endTime").text(inputStop == null ? "" : inputStop);
$("#lastKey").text(lastKey == null ? "" : lastKey);
$("#totalTime").text(inputStart == null ? "" : (inputStop - inputStart) + " milliseconds");
if (!inputStart) {
// clear the results
$("#resultsList").html("");
$("#scanInput").focus().select();
} else {
// prepend another result item
var inputMethod = isScannerInput() ? "Scanner" : "Keyboard";
$("#resultsList").prepend("<div class='resultItem " + inputMethod + "'>" +
"<span>Value: " + $("#scanInput").val() + "<br/>" +
"<span>ms/char: " + ((inputStop - inputStart) / $("#scanInput").val().length) + "</span></br>" +
"<span>InputMethod: <strong>" + inputMethod + "</strong></span></br>" +
"</span></div></br>");
$("#scanInput").focus().select();
inputStart = null;
}
}
$("#scanInput").focus();
The code above does not support copy/paste, but in our situation this is unlikely to happen anyway.
上面的代码不支持复制/粘贴，但在我们的情况下这不太可能发生。
回答by Igor S.
You need to listen on "paste" event using jQuery
您需要使用 jQuery 侦听“粘贴”事件
$("input").on("paste",function(e){
$("#txtItem").focus();
});
Here is a example: http://jsfiddle.net/T6VdS/
这是一个例子：http: //jsfiddle.net/T6VdS/
回答by Tom Elmore
I would think the scanner is just being seen as a text input device like a keyboard and outputting text. Unless there is a way to identify that text then the answer is likely to be that there isnt an easy solution.
我认为扫描仪只是被视为一种文本输入设备，如键盘和输出文本。除非有一种方法可以识别该文本，否则答案很可能是没有简单的解决方案。
If the code you are receiving is always in the same form and can be identified with a regular expression you might be able to move it into the correct box by somehow buffering the input (I would expect the scanned code to come in a series of keypresses that are far faster than a human would input) and running a regex over it...
如果您收到的代码始终采用相同的形式并且可以使用正则表达式进行识别，则您可以通过某种方式缓冲输入将其移动到正确的框中（我希望扫描的代码会出现在一系列按键中这比人类输入的要快得多）并在其上运行正则表达式......
回答by nick
Add a prefix to the text that the scanner outputs (almost all scanner will let you do this) and then when any input starts with that prefix you know its the scanner.
为扫描仪输出的文本添加前缀（几乎所有扫描仪都可以让您这样做），然后当任何输入以该前缀开头时，您就知道它是扫描仪。
To catch the input with jquery you mightdo something like this:
要使用 jquery 捕获输入，您可以执行以下操作：
//presuming the scanner acts like a keyboard
$(document).keypress(function (e) {
//do something to match the 'key presses'
//focus to the input and put the rest of the string in there
});
回答by Jeff_Alieffson
The best way is to put data into scanned code. Almost all scanners support such programming. Many of them can be programmed via control barcodes, that printed in manual.
最好的方法是将数据放入扫描码中。几乎所有的扫描仪都支持这样的编程。其中许多可以通过手动打印的控制条形码进行编程。
I use the Ctrl+Char for Symbol scanner, F9 data F10 for Honeywel bluetooth scanner. Wasp scanner does not support Ctrl+character combination. So I use [Data] format for Wasp.
我将 Ctrl+Char 用于符号扫描仪，F9 数据 F10 用于霍尼韦尔蓝牙扫描仪。Wasp 扫描仪不支持 Ctrl+字符组合。所以我对Wasp 使用[Data] 格式。
Then I catch the first symbol (say [ char) in program an position the cursor in search box. Upon receiving the last character (in my case ] char) send the contents of into search routine.
然后我在程序中捕捉第一个符号（比如 [ char ），将光标定位在搜索框中。收到最后一个字符（在我的情况下是 ] 字符）后，将 的内容发送到搜索例程中。
