Keyboard - Hide on focus input


I am working on apps that are installed on devices with a scanner, the scanner send the barcode inside an input when an input has been focused.

But I would like to keep the keyboard hidden even when the focus is set in an input. I know that it’s possible to hide keyboard but when I hide keyboard on input focus, I lose focus…

Does anyone have a solution ?


1 Like

Does anyone have a solution for this ?

try to check your cables at the first time, then try to check all needed software, and if it doesn’t work - go to the programmer

Whaaat ? I think that you didn’t understand my request.

You tried this?

I did. But the input lose focus when keyboard closed.

If I use the “readonly” attribute, the input is not focusable anymore… Very annoying

We found a way to do it, I can focus the input without showing the keyboard. :blush:

Can you show how you did this?

Sure, you can find the npm package : hide-keyboard available for Ionic

If you didn’t want to download an entire package, is there any need to allow editing of the input?

If not, I would set the input to disabled, and then insert the scanned characters programatically into the variable that the [(ngModel)] is pointing to.

If you really wanted to get fancy, I would actually create a button (or tappable) that would display a modal when the barcode needed to be scanned. It could then be scanned into a disabled input or other variable and then passed back to the parent page via navparams.

You could possibly capture the barcode scan by binding to the keypress event of the modal page.

What ? The entire package is really small so you can use it easily.

When reading this again I’m having some new ideas without having you needing an extra package.
So this is kind of the example of what @raytri did describe with a little different kind of implementation

The thing is… Why would you have to focus to an input field? I understand that you want to address the scanner to that input field, but that makes the keyboard pop up. So…

Why don’t you bind the incoming scanner data to the input data model? If it’s 1, just bind it directly, or if you have multiple input fields, you could then somehow make the UI selecting the input field which you want to update when the scanner data is comming in. No need for extra stuff…

// your scanner
private myScanner: scannerObject = yourScannerObjectFromLib; // (?)
// single input
public inputModel: string;
// for multi inputs 
public inputModels: string[] = [];
private selectedInputIndex: number = 0; 

constructor( ... ) { ... }  // ??? your dependencies

public doScan() {
   this.myScanner.scan().subscribe((data) => { // your scanner implementation
      this.inputModel = data.value; 
      // when using it like this, WITHOUT selecting an input, you can update the input value but not activate the keyboard

// example for multiple input fields
public selectWhichInputToUpdate(inputIndex: number) {
   this.selectedInputIndex = inputIndex;

public doMultiScan() {
   this.myScanner.scan().subscribe((data) => { // your scanner implementation
      this.inputModels[this.selectedInputIndex] = data.value; 

      // extra
     this.selectedInputIndex++; // e.g. auto select the next input
     <ion-input [(ngModel)]="inputModel" > </ion-input>
  <!-- OR -->  
   <ion-item *ngFor="let item of inputModels; let i = index" (click)="selectWhichInputToUpdate(i)">
     <ion-input [(ngModel)]="inputModels[i]" > </ion-input>

Btw: An even better implementation would be using/managing the “form” with an formGroup and formControls.
Second note: Maybe you wouldn’t need an ion-input implementation at all. You can set it up like this and use it as you want. That’s up to you

So this is just the general idea. The implementation is yours :slight_smile:


1 Like

That was the gist! I opted for listening to keypress events because in my experience with USB scanners they just simulate the input of a USB keyboard. Your solution feels much cleaner though!

1 Like

Hi dear Bilow, I tried your code but, can you tell me how i can find The Scanner Object Library?

I tried this package but it seems not work for me. Can you help me?