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>

或者我错过了什么？

如何在提交时读取条形码图像作为输入

1 个答案: