BarCode Reader with JQuery Events

Question

I am using asp.net client page where i have a text box

<asp:TextBox class="form-control " autocomplete="off"   ID="txtScan" runat="server"></asp:TextBox>

using jquery i am trying to get the value when barcode reader reads the value

$(document).ready(function () {
    $('#<%=txtScan.ClientID%>').on('change', function() {
      console.log( $('#<%=txtScan.ClientID%>').val())
 });
});

The issue i am facing is that this change event gets fired for each character entry and continuously

I wish to get the input value after the barcode reader finish reading the value completely. And with that i would like to perform some server side actions using ajax. And this should be done without losing focus of input.

When i use aspx textbox OnTextChanged event i am achieving this. But now i wish to do this with jquery/javascript

Answer 1

I suggest to add a timer, and give some time to the user to interact before do any action and not direct fired anything.

For example you can do that:

var pTimerSelCntr = null;
$(document).ready(function () {
    $('#<%=txtScan.ClientID%>').on('change', function() {
        // clear the time out, so the function is not fired
        if (pTimerSelCntr)
            clearTimeout(pTimerSelCntr);

        // start new time out to fire the function
        //  and give some time to the user to interact again
        //  before you do any action
        pTimerSelCntr = setTimeout(function() { 
            console.log( $('#<%=txtScan.ClientID%>').val())  
        }, 800);      
 });
});

The issue i am facing is that this change event gets fired for each character entry and continuously

This is not normal, maybe something else is also interact with your editor, but with the above code you probably avoid conflicts, and time race issues, where more than one try to do thinks on the editor.