1

我有两个表单输入元素作为类 [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 技能失败了。所以也许这就是要走的路？

4

1 回答 1

0

如果我理解正确（但这是一个很大的假设）：

  • 扫描仪正在分析您的页面。
  • 扫描仪将模拟点击识别任何条形码的区域。
  • 出于某种原因，它还会模拟enter按键。
  • 您希望您的页面根据扫描仪模拟点击的位置对点击+输入做出反应

如果这一切都是正确的，那么您的代码对我来说似乎过于复杂了。您可以简单地使用您的条形码创建两个图像按钮并对点击事件做出反应，如下所示：

<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>

还是我错过了什么？

于 2013-12-30T17:55:44.827 回答