Prevent the on-screen keyboard from showing on a mobile

Wappler General How To
#1

I am building a web app which includes scanning of QR codes using a bluetooth scanner. To get the data, the scanner behaves like a keyboard so the data it scans is ‘typed’ into an input field. I’ve made the input invisible and set it to have focus so it all works. However, mobile browsers insist on showing the on-screen keyboard because it’s a text field which has focus. If you close the keyboard, the field loses its focus so the scanner doesn’t work.

Can anyone help with preventing the keyboard from showing?

Many thanks.

#2

Someone is going to use such Bluetooth scanner on their mobile phones?

#3

what if you set readonly attribute to the input, i think it should prevent the keyboards on mobile from appearing?

#4

Yes. The scanners are really cheap and work incredibly well.

1 Like
#5

Won’t that stop the input from the scanner from being entered?

#6

I don’t think it will stop the dynamic value from being added to the input. Readonly should stop the user input only.

1 Like
#7

It might not. I use this on a date picker that allows the user to select a date without popping the side keyboard.

I don’t know if the component is removing the read only attribute and then adding back but I don’t think so.

#8

The scanner is effectively a bluetooth keyboard. I’ve tried making the input readonly but that means the characters sent by the scanner aren’t entered.

There must be a way to have the input field active and with focus but not show the onscreen keyboard.

#9

I read about setting input type=“none”.
Tried it and had no screen-keyboard nor console errors…

Please try it Jon:

<form id="form1" is="dmx-serverconnect-form" method="post" action="dmxConnect/api/testing/dummy_copy.php">
                <div class="form-group md-3"> <label for="cat_id" class="form-label">Some text</label>
                    <input type="none" class="form-control" id="cat_id" name="cat_id" aria-describedby="cat_id_help" placeholder="Enter some text">
                    <small id="cat_id_help" class="form-text text-muted">Your input is very valuable.</small>
                </div>
                <button id="btn3" class="btn btn-info" type="submit">Send</button>
            </form>
#10

I thought you were using a dmx-bind:value to add the value in the input.

#11

No, I get the data as if it’s typed in as the scanner sends the characters to the device the same way a keyboard does.

#12

Maybe you can capture key presses instead of an input field

1 Like
#13

Unfortunately it doesn’t make any difference. Once the input has focus (and it needs focus in order for the scanner to ‘type’ the info into it) the keyboard appears regardless of input type.

#14

Could you not first populate a variable to store the initial input and then echo this to the read-only form input? ie, set the form input to bind to the variable?

#15

I was wondering that but there could be quite a few. It was all too easy to just have an input field which gets it all.

#16

But how would I capture the characters ‘typed’ by the scanner into the variable?

#17

Shot in the dark but using a Dynamic on Key Press/Key Down event update the variable or even the read-only input?

1 Like
#18

Good shot

2 Likes
#19

I think I’ve found a solution. It kind of works on iOS Chrome.

onshow="navigator.virtualKeyboard.hide()"

IMG_8945
IMG_8945960×239 26.9 KB

This doesn’t completely hide the keyboard but makes it almost hidden - there’s a small part at the bottom of the screen but it’s good enough. I just need to tell people not to tap ‘Done’ otherwise the input loses focus and the scanner doesn’t work.

Thanks everyone for your help.

#20

According to ChatGPT you can do it using CSS?

Screenshot 2024-04-17 at 8.35.05 AM
Screenshot 2024-04-17 at 8.35.05 AM1336×560 47.9 KB