TTCG TTCG - 1 month ago 6
Javascript Question

Always setting the text cursor on Textbox

I am writing a web page which will have only 1 text box on the page and display the information due to the given data.

Our plan is that, we will use Barcode Scanner or Magnetic Swipe and Touch Screen Monitor for that special page. When the student card is scanned, it will automatically postback and retrieve the data from the datasource and display on the webpage. We have built the sample page and managed to make it work with the real data.

The sample data could be a barcode or magnetic swiped data.

Sample Barcode Data - ?300203623;
Sample Magnetic Swiped Data - ;30020362300203622016?


Both input devices (barcode scanner and Magnetic Swipe) append the Enter keycode automatically. You can disable it if you want. Since we want to post it back after the scanning/swiping, we prefer to leave the Enter key as it is.

The problem is that when the user accidentally click anywhere on the webpage, the textbox lost the focus and when the card is scanned or swiped again, it doesn't do anything. Because the text box lost the focus and scanned data are not inserted to the textbox and it doesn't do the post back to the server.

enter image description here

I wrote the javascript to reset the focus on the textbox (id: Reference) whenever it lost the focus. I can see the console.log lines on the console. But it's not setting the focus on the textbox. I tested on FF, Chrome & IE but the same problem.

$('#Reference').focusout(function () {
console.log('on focusout' + new Date());
$('#Reference').focus();
});


My first question is how can I re-focus on the textbox whenever it lost the focus.

Secondly, are we doing the right thing? What if we want to add 'image' or 'link' to touch/click in the future? Is it going to affect, if we keep forcing the focus to the textbox?

If there is a better way in mind, please feel free to suggest me.

Answer

I just tried your code - it worked in Chrome, but for Firefox i needed to wrap it in a timeout:

$('#input').focusout(function () {
    console.log('on focusout' + new Date());
    setTimeout(function() {
      $('#input').focus();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Comments