使用条形码扫描仪将焦点从一个输入更改为下一个答案

【问题标题】：Changing focus from one input to the next with a barcode scanner使用条形码扫描仪将焦点从一个输入更改为下一个
【发布时间】：2016-06-07 11:57:38
【问题描述】：

我正在使用条形码扫描仪将数据输入网页上的输入字段。我在第一个输入字段上设置了表单和自动对焦。当第一个条形码输入到第一个输入字段时，我希望焦点跳转到下一个输入字段。但是，只要我输入第一个条形码，表格就会“提交”。这是我正在使用的html：

    <form id="barcode1" name="barcode" method="Post" action="#">

       <div>
          <label for="S1">Barcode 1 </label>
          <input id="S1" class="bcode" type="text" name="S1" autofocus/> 
          <label for="S2">Barcode 2 </label>
          <input id="S2" class="bcode" type="text" name="S2" />      
          <label for="S3">Barcode 3 </label>
          <input id="S3" class="bcode" type="text" name="S3" />
       </div>
       <p><input type="submit" name="Submit" value="Submit"></p>

    </form>

我已经尝试过类似 SO 问题 here 和 [这里] (http://jsfiddle.net/davidThomas/ZmAEG/) 的解决方案，但它们似乎不起作用。

理想情况下，我希望有一个类似这样的解决方案（上面的第二个链接），所以请让我知道它在哪里或为什么不起作用以及我可以做些什么来解决它。

    $('form').on('keypress','input',function(e){
        var eClassName = this.className,
            index = $(this).index('.' + eClassName) + 1;
        if (e.which === 13){
            e.preventDefault();
            $('input.' + eClassName)
                .eq(index)
                .focus();
        }
    });

【问题讨论】：

标签： javascript jquery barcode-scanner

【解决方案1】：

如果您的条形码扫描仪是键盘楔形，您应该能够将尾随字符配置为 TAB。

默认情况下，您的扫描仪似乎以 ENTER（回车）结尾。

另一种选择是在您的 javascript 代码中检查 LF（十进制 10）。

【讨论】：

【解决方案2】：

为了防止回车键提交表单，需要返回false。

这个问题的答案会对你有所帮助：Prevent form submission with enter key

//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e){
    if ( e.which == 13 ) // Enter key = keycode 13
    {
        $(this).next().focus();  //Use whatever selector necessary to focus the 'next' input
        return false;
    }
});

无需对条形扫描仪进行任何更改。

【讨论】：

我尝试如下实现： $('#barcode1').find('input').keypress(function(e){ if ( e.which == 13 ) // Enter key = keycode 13 { $(this).next('input').focus(); return false; } });它是成功的，因为它阻止了“输入”提交表单，但焦点没有传递到下一个输入。我也尝试使用 next() 选择 .bcode 类，但它似乎也没有转移焦点。
你选择它的方式一定有问题。我到家时会检查的。
一个比我有更多 jquery 经验的人可以解释为什么，但这似乎有效：jsfiddle.net/g75v4q6d
据我所知，next 应该使用您传递的选择器选择下一个同级，因此仅传递 '.bcode' 应该选择您拥有的下一个输入...
确实有效，谢谢。我惊讶地发现必须有两个 next() 方法，一个用于标签，一个用于输入。这似乎表明标签和输入不被视为兄弟姐妹 - 或类似的东西。

【解决方案3】：

看起来您的函数将永远不会被调用，因为浏览器会在 Enter 上提交表单。您可能必须通过首先拦截提交事件来禁止提交，直到所有字段都被填写（或某些其他条件）。

$( "form" ).submit(function( event ) {
  if(/*all req. fields are filled -> submit the form*/)
     $(this).submit();
  event.preventDefault();
});

【讨论】：