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…
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.
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-list>
<ion-item>
<ion-input [(ngModel)]="inputModel" > </ion-input>
</ion-item>
<!-- OR -->
<ion-item *ngFor="let item of inputModels; let i = index" (click)="selectWhichInputToUpdate(i)">
<ion-input [(ngModel)]="inputModels[i]" > </ion-input>
</ion-item>
</ion-list>
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
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!