0

I have an input box which i have camouflaged in the background. Basically, i am developing an app for Honeywell CT50 device, which uses laser scanning for scanning barcodes and qrcodes. Since, laser scanner requires an input box to contain the value of barcode, once scanned, being the default behavior of focused input box, keypad appears on the mobile screen. I don't want the keypad to appear as the value is being read by scanner. I am developing the application using angular 6. Due to the keypad popping up from bottom of the screen, i am also facing some issues regarding vertical scrolls.

I have tried hiding the keyboard using :

<input #barcodeInput onfocus='blur()'>

The above doesn't work.

Then i tried the following:

@ViewChild('barcodeInput') barcodeInput: ElementRef;
this.barcodeInput.nativeElement.dismissSoftInput();

The above doesn't work as well.

I am stuck and can't proceed. I have to hide the keypad when i load a particular component, keep focus on the hidden input box so that laser scanner works without any click and then clear the value of hidden text box once the value is processed.

Please suggest me a solution!

Rahul Sharma
  • 225
  • 1
  • 4
  • 15
  • What about just using a ``? How are these inputs used? Is this done through some `
    ` or through AJAX? You aren't going to be able to prevent the keyboard from popping up through text input focus.
     – zero298 Jul 24 '18 at 20:40
  • 1
    Or, consider the solution used here: https://stackoverflow.com/q/7610758/691711 – zero298 Jul 24 '18 at 20:40

1 Answers1

0

I know the question is so old, but may be there are still some needs.

In my case, I have an app: AppComponent -> ComponentWithInput and with the html:

<div class="app-container" (click)="onClick()">

    <component-with-input></component-with-input>

</div>

And everything I do is adding (click)="onClick()"

You can leave the method empty as I did:

onClick() {
    // EMPTY
}

This works for me.

NickNgn
  • 122
  • 2
  • 8