CODEWITHSUNDEEP
javascriptjqueryuser-interfacefocus
TTCG
TTCG

Reputation: 9113

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.

Upvotes: 0

Views: 1171

Answers (2)

Christian Zosel
Christian Zosel

Reputation: 1424

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

$('#form').submit(function( event ) {
  console.log("submit", $("#input").val());
  event.preventDefault();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="text" id="input">
</form>

Upvotes: 0

sergio0983
sergio0983

Reputation: 1278

With blur instead of focusout it worked for me (used plain javascript, but should work with jquery too):

HTML

<textarea id = 'txt'></textarea>

Javascript

document.getElementById("txt").addEventListener("blur", function(e){ setTimeout(function(){e.target.focus();}, 0); });

http://codepen.io/sergio0983/pen/bBbYzK

Upvotes: 1

Related Questions