jQuery：從鍵盤收聽自動掃描器輸入？

Question

我正在爲附帶有條碼掃描器的圖書館系統編寫一個網絡應用程序。掃描儀的輸入顯示爲鍵盤輸入，並始終爲格式~~[\d]+.[\d]+~~，例如~~470.002~~。

我想爲掃描器輸入設置一個jQuery偵聽器，並且是一個jQuery新手。它應該聽取所有的鍵盤輸入，但只有在它從掃描儀聽到輸入時才執行操作，並且只有在掃描儀輸入完成時才執行操作。

這是據我已經得到了（即不是很）：

//Global functions: call on all pages. 
$(document).ready(function() { 
    // Listen for scanner input. 
    $(window).keypress(function(e) { 
     var key = e.which; 
     if (key==126) {. 
      alert('tilde'); 
      // How to listen for the correct input? 
      // check_out_book(); 
     } 
    }); 
}); 

什麼是保持我需要的格式輸入監聽的最佳方式？在撥打check_out_book()之前，我希望能聽到最後兩個波浪線。

如果出現暫停，我還希望在第一個代字號後停止收聽 - 區分人類打字員和自動掃描儀輸入。 jQuery有辦法做到這一點嗎？

非常感謝任何指針！謝謝。

Answer 1

我認爲你想通過存儲你迄今收到的內容並檢查它是否有效來做到這一點。如果不是，則丟棄所收到的內容並重新啓動：

$(document).ready(function(){ 
    var input = '', 
     r1 = /^~{1,2}$/, 
     r2 = /^~{2}\d+$/, 
     r3 = /^~{2}\d+\.$/, 
     r4 = /^~{2}\d+\.\d+$/, 
     r5 = /^~{2}\d+\.\d+~{1}$/ 
     r6 = /^~{2}\d+\.\d+~{2}$/; 

    $(window).keypress(function(e) { 
     input += String.fromCharCode(e.which); 

     if (r1.test(input) || r2.test(input) || r3.test(input) || r4.test(input) || r5.test(input)) { 
      // input is valid so far, continue 
     } else if (r6.test(input) { 
      // input is valid and complete 
      check_out_book(); 
     } else { 
      // input is invalid, start over 
      input = ''; 
     } 
    }); 
}); 

您可以將所有這些正則表達式合併成2個，但我覺得它更清晰的這種方式。

Answer 2

我剛寫完一小段javascript，檢測是否使用條形碼掃描器填充輸入字段，如果是，則將焦點移至下一個字段。

我的代碼回答了你的問題的一部分，「我想爲掃描器輸入設置一個jQuery偵聽器，並且是一個jQuery新手，它應該監聽所有的鍵盤輸入，但是隻有當它聽到掃描儀，只有當掃描儀輸入完成時。「

下面是輸入字段的HTML：

<input type="text" class="bcode" id="f1" onkeydown="typeSpeed(new Date().getTime());" onblur="typeSpeedReset();" onfocus="typeNextField('f2');" /> 
<input type="text" class="bcode" id="f2" onkeydown="typeSpeed(new Date().getTime());" onblur="typeSpeedReset();" onfocus="typeNextField('f3');" /> 
<input type="text" id="f3" /> 

我有被用於條形碼掃描儀錄入（F1 & F2）類的BCODE「兩個領域。第三個字段用於常規輸入（f3）。字段f1 & f2發送（1）當鍵被按下到函數'typeSpeed'時的當前時間戳和（2）字段獲得焦點時選擇的下一個字段的ID。當字段失去焦點時，這些字段也會觸發函數'typeSpeedReset'的調用。

這裏是JavaScript/jQuery的，使得它的工作：

$(function(){ 
    var typingTimeout; 
    $('.bcode').keypress(function(e){ 
     if (typingTimeout != undefined) clearTimeout(typingTimeout); 
     typingTimeout = setTimeout(isBarcode, 500); 
    }); 
}); 

var ts0 = 0, ts1 = 0, ts2, nf; 

function typeSpeed(time) { 
    ts0 = (ts0 == 0) ? time : 0; 
    var ts3 = ts1; 
    ts1 = time - ts0; 
    ts2 = ts1 - ts3;  
} 

function typeSpeedReset() { ts0 = 0; ts1 = 0; } 

function typeNextField(nextfield) { nf = nextfield; } 

function isBarcode() { 
    if(ts2 < 20 && ts1 != 0) { $('#'+nf).focus(); } 
} 

會發生什麼事是由函數定量擊鍵之間的時間「typeSpeed」。我通過實驗發現（混搭鍵盤或按住鍵），最快的人體輸入在擊鍵之間具有大約〜33ms的延遲。我用來測試的條形碼掃描儀通常會產生10ms或更少的延遲。

通過類'bcode'在字段上設置超時以檢測輸入何時暫停。此時，評估延遲。如果小於20ms，則假定條形碼掃描器已被使用，並且下一個區域被給予焦點。

這段代碼寫的項目更進一步，通過改變字段的背景顏色，並在字段右側顯示一個小的條形碼圖形，以便用戶有明確的指示，表明它響應並且旨在用於條形碼掃描儀輸入。

Answer 3

請檢查this link，它會檢測條碼掃描器，您不必將焦點集中到某個輸入。