• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Tab = Enter

Explorer ,
Mar 30, 2018 Mar 30, 2018

Copy link to clipboard

Copied

I have a form that we scan a single number into.  The barcode scanner has an "Enter" built in to it after it scans.

The problem is that these scanners are used for many other programs in our lab that all need a "Tab" and staff have to frequently switch them back and forth between tab and enter.

My form is one simple field and a submit key, so scanning now captures the data and submits it.

Can the form be set to submit when a "Tab" is sent?  So it would be: scan data --> Tab = data submitted.

Thanks

Views

435

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 30, 2018 Mar 30, 2018

Copy link to clipboard

Copied

I think you can use JavaScript to accomplish that.  Set the field so that onBlur="this.form.submit();" and onChange="this.blur();"

Not tested, but I think theoretically it will work.

V/r,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 30, 2018 Mar 30, 2018

Copy link to clipboard

Copied

Okay.. I was close. 

<form><input type="text" onBlur="this.form.submit();" id="testing" oninput="this.blur();"  /></form>

HTH,

^ _ ^

UPDATE:  According to caniuse, there are minor issues with using oninput, but it enjoys full support in FF since 3.6, Chrome since 15.0, Safari since 6.1, IE since 10, and Edge since 12.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 30, 2018 Mar 30, 2018

Copy link to clipboard

Copied

You can even do it like so:

<form id="testSubmit"><input type="text" id="testing"  /></form>

<script type="text/javascript">

    var testSubmit = document.getElementById('testSubmit'),

          testing = document.getElementById('testing');

    function submitIt(){testSubmit.submit();}

    function blurIt(){testing.blur();}

    testing.addEventListener('blur',submitIt);

    testing.addEventListener('input',blurIt);

</script>

V/r,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 30, 2018 Mar 30, 2018

Copy link to clipboard

Copied

WolfShade, you are awesome, thank you, I will test it next week when I am back to work.

Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 02, 2018 Apr 02, 2018

Copy link to clipboard

Copied

I'm sure it's something I did.  I tried the option below.  After I enter one character in the form (if typed manually) it submits.

I need to be able to type or scan the unit number into the form, then when the TAB character is received, submit the form.

WolfShade  wrote

You can even do it like so:

<form id="testSubmit"><input type="text" id="testing"  /></form> <script type="text/javascript">     var testSubmit = document.getElementById('testSubmit'),           testing = document.getElementById('testing');     function submitIt(){testSubmit.submit();}     function blurIt(){testing.blur();}     testing.addEventListener('blur',submitIt);     testing.addEventListener('input',blurIt); </script>

V/r,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2018 Apr 02, 2018

Copy link to clipboard

Copied

Precisely.  If your scanner is currently set to populate the one field with one character, then when that one character is entered into the field the form will submit.

I don't work with scanners, so am not familiar with how they work in conjunction with HTML forms, but if you know that part, then applying my methodology to your form should be a breeze.

HTH,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2018 Apr 02, 2018

Copy link to clipboard

Copied

LATEST

I just re-read your original post.  If the scanner automatically tabs after entering the single number into the field, then all you need is the submit part of the code.

<form id="testSubmit"><input type="text" id="testing"  /></form> 
<script type="text/javascript"> 
    var testSubmit = document.getElementById('testSubmit'),

     testing = document.getElementById('testing'); 
    function submitIt(){testSubmit.submit();}
    testing.addEventListener('blur',submitIt); 
</script>

If you want to manually enter a number and manually tab, then the above will also work.

If you want the form to automatically submit after a value is entered, the first set of code I provided will do that.

HTH,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation