CODEWITHSUNDEEP
jquerytwitter-bootstrapfocus
Robin Walmsley
Robin Walmsley

Reputation: 95

Jquery Bootstrap and input field Focus control

I'm working on a POS system using a Webapp, html, css and JQuery/JS. Bootstrap is used in the Html.

There is a main page with one input field where the scanned barcode is input. All other "pages" are modal. The tablet device is a Windows Tablet. A Bluetooth keyboard is connected. There are no circumstances where the user will need to use the Tab button, they will use the touch screen to navigate and the keyboard to input customer details etc.

To my problem. On the main page it is possible for the User to press Tab accidentally and move the focus away from the barcode input field. If they do this and are unaware, the next scanned barcode will not appear on the items list. I need to prevent this, to make sure the input field always has focus.

Is there a way to do this? I had considered detecting focus on every other element on the main page (buttons etc) and then immediately redirecting focus to the input field. Is there a more efficient way?

Thanks

EDIT: I think this may be achieved with focusout and detecting that no modals are open .. comments?

Upvotes: 0

Views: 160

Answers (1)

Sergiu
Sergiu

Reputation: 1206

You can try this:

$('#the-input').keydown(function(e){
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if(keycode == '9'){
        e.preventDefault();
    }
})

It will prevent the focus to be lost when you press the tab key.

Upvotes: 1

Related Questions