Disable popup keyboard for a specific text field on touch devices / mobile

Is there a way to disable the popup keyboard on a mobile device?

Reason is I would like to integrate a barcode scanner into our app. How it currently works is when my form opens, I set the focus to be on a text box, and then an event is triggered when enter is pressed. When the barcode scanner scans something it sends the barcode text followed by enter so the event triggers. This works perfectly on desktop, and it also works on mobile. But a minor issue on mobile is that the popup keyboard covers half the screen so its hard to see what has been scanned.

Is there a way to disable the popup keyboard just for this text field? I imagine it might be possible via CSS as discussed here - Text box number - how to display up/down arrows but would appreciate any pointers. (or a better way all together to handle barcode scanner inputs).

Thanks :slight_smile:

Could you not disable the text box if no actual keyboard input is required? Or even use a label?

You can call functions to process the data in the text property of either without having to trap enter events.

Of course, that’s no use if you also need the option of manual entry in that same form (though maybe you could change the text box status if manual entry is required, something like that).

Thanks for your reply. I dont specifically need manual entry right now so your approach could work… but if I disable the text box, how would I capture the barcode scanner data?

The scanner basically acts a keyboard. So when you scan a barcode it sends the equivalent keystrokes along with an enter at the end. Is there a way to capture keyboard inputs without a text field?

Ah, ok I didn’t know that.

Have you tried using mousetrap and manage keyboard events as described by @david.wylie here.?

Hi, no I have not tested that but thanks for the link I will definitely check it out as seems like it might work :smiley: So thanks :+1: