如何在提交時讀取條形碼圖像作為輸入

Question

我有兩個表單輸入元素作為類 [1] 和我的 jQuery [2]。

我想要的是：兩個條形碼（DataMatrix 符號）； 一個代表真，一個代表假（或是和否）。 掃描條碼輸入時，會發生一些事情，具體取決於掃描的是哪個。

此代碼的多個排列失敗。

觀察：聚焦的輸入條碼圖像將是掃描儀提交的圖像，而不是掃描圖像。 使用現有代碼，您會看到我將類置於焦點（強制），這總是將第二個表單輸入置於焦點 - 焦點很重要，因為掃描儀不發送掃描圖像。 如果我掃描第一個表單輸入，處理程序認為我掃描了第二個輸入。

因此，要么我需要找到一種方法來攔截掃描以專注於實際掃描的輸入，要么我需要找到一種完全不同的方法來完成任務。

簡短的回答是如何掃描條形碼輸入？ 條碼數據是什么無關緊要。 重要的是實際輸入字段與條碼的含義相關聯，即條碼意味着“是”並與 ID“barcode_true”相關聯，另一個意味着“否”並與 ID“barcode_false”相關聯。 希望這是有道理的。

[1] 我的 html（相關片段）：

<div class="barcodes">
 <form id="answer_form">
  <div id="answer_boxes" class="hidden">
   <div style='float:left;display:inline-block'>
    <div style='text-align:center'>
     <input class="barcode_button" type="image" src="/path/to/barcode1.png" id="barcode_true" />
     <h2><span style="width: 50%">Yes</span></h2>
    </div>
   </div>

   <div style='float:right'>
    <div style='text-align:center'>
     <input class="barcode_button" type="image" src="/path/to/barcode2.png" id="barcode_false" />
     <h2><span style="width: 50%">No</span></h2>
    </div>
   </div>
  </div>
 </div>

[2]我的js：

var myDialog =  $('.barcodes').dialog(
{   
    title: title,
    modal:true,
    width:'1200',
    height:'350',
    resizable: false,
    closeOnEscape: true,
    position: 'center',
    draggable: false,
    open : function() // some styling being done here...
           {   
               $('#answer_boxes').show();

               $('.barcode_button').focus().on({
                   blur:  function(e)
                          {   
                              console.log('regaining focus!');
                              $(this).focus();
                          },  
                   click: function(e)
                          {   
                              e.preventDefault();
                              var ans_id = $(this).attr('id');

console.log('ON: ' + $(this).attr('id')); // always the focused input not the scanned one.
                              if ( ans_id == 'barcode_true' )
                              {   
console.log('CLICK YES');
                                  // do  something here
                              }   

                              if ( ans_id == 'barcode_false' )
                              {   
console.log('CLICK NO');
                                  e.preventDefault();
                                  // do  something here
                              }   
                          }});
           },  
    beforeClose:
        function()
        {   
console.log('CLOSING!');
            reset_form();
        },  
    });
};  

編輯

我最接近獲得我想要的功能的是有一個可用於放置掃描輸入的文本輸入框。 當掃描儀掃描時，它會自動“按下”回車鍵，這樣我就可以從處理程序讀取掃描的輸入。 問題是如果我使用這種方法，我不希望用戶看到輸入字段表單，但是如果表單沒有顯示，它就沒有用。 我打算嘗試將條形碼圖像覆蓋在輸入字段上，但我的 css 技能受到了打擊。 所以也許這就是要走的路？

Answer 1

如果我理解正確（但這是一個很大的如果）：

• 掃描儀正在分析您的頁面。
• 掃描儀將模擬點擊它識別任何條形碼的區域。
• 出於某種原因，它還會模擬回車鍵按下。
• 您希望您的頁面根據掃描儀模擬點擊的位置對此點擊+輸入做出反應

如果所有這些都是正確的，那么您的代碼對我來說似乎過於復雜。 您可以簡單地使用條形碼創建兩個圖像按鈕並對點擊事件做出反應，如下所示：

<button type="button" onClick="scanner_chose_yes();">
    <img src="barcode_yes.png">
</button>
<button type="button" onClick="scanner_chose_no ();">
    <img src="barcode_no.png" >
</button>

或者我錯過了什么？