Changing focus from one input to the next with a barcode scanner

Question

I am using a barcode scanner to enter data into input fields on a webpage. I set up the form and autofocus on the first input field. When the first barcode is entered into the first input field I would like focus to jump to the next input field. However, as soon as I enter the first barcode the form 'submits'. Here is the html I am using:

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

I have tried solutions from similar SO questions here and [here] (http://jsfiddle.net/davidThomas/ZmAEG/), but they don't seem to work.

Ideally I would like to have a solution something like this (the second link above), so please let me know where or why this is not working and what I can do to fix it.

    $('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();
        }
    });

score 1 · Answer 1 · answered Feb 24 '16 at 23:01

If your barcode scanner is a keyboard wedge, you should be able to configure the trailing character to a TAB.

It seems like, by default, your scanner is trailing with an ENTER (carriage return).

Another option would be to also check for a LF (decimal 10) in your javascript code.

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

You need to return false in order to prevent the enter key from submitting the form.

The answer to this question will help you: 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;
    }
});

No need to make any changes to your bar scanner.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 24 '16 at 23:12

Redmega

673
5
21

I have tried to implement this as follows: $('#barcode1').find('input').keypress(function(e){ if ( e.which == 13 ) // Enter key = keycode 13 { $(this).next('input').focus(); return false; } }); It is successful in that it prevents the 'enter' from submitting the form, but focus does not pass to the next input. I have also tried selecting the .bcode class with next(), but it also does not seem to transfer focus. – Christie_c01 Feb 25 '16 at 21:55
There must be something with the way you are selecting it then. I'll check when I get home. – Redmega Feb 25 '16 at 21:57
Someone with more jquery experience than I can explain why, but this seems to work: https://jsfiddle.net/g75v4q6d/ – Redmega Feb 26 '16 at 01:55
As far as I know, next should select the next sibling with the selector you pass it, so passing just `'.bcode'` should select the next input you have... – Redmega Feb 26 '16 at 02:13
That does work, thanks. I was surprised to see that there had to be two next() methods, one for label and one for input. It seems to suggest that label and input are not seen as siblings then - or something to that effect. – Christie_c01 Feb 26 '16 at 03:54
Yes, it's possible that the 'label' and 'input' share a node in the DOM... Looks like the HTMLInputElement has a `labels` attribute which has the labels that are `for` it... – Redmega Feb 26 '16 at 04:28

score 0 · Answer 3 · answered Feb 24 '16 at 23:24

Looks like your function will never get called because browser submits the form on Enter. You may have to suppress submit until all fields are filled (or some other condition) by intercepting submit event first.

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

Changing focus from one input to the next with a barcode scanner

3 Answers3