Im looking to create an application in asp.net 5 / Angular2 and I am encountering an issue with scanning barcodes.
This is the TypeScript code for my component:
@Component({
selector: 'barcode-scanner',
templateUrl: 'app/scan.html',
directives: [ROUTER_DIRECTIVES]
})
export class ScanComponent implements OnInit {
barcode: string;
constructor() {}
ngOnInit() { }
onKey(event: any) {
this.barcode = event.target.value;
}
}
Here is my html template (scan.html):
<barcode-scanner>
<div class="container">
<header><h1>My App title</h1></header>
<div class="row">
<input type="text" (keyup)="onKey($event)" autofocus />
<p>barcode: {{ barcode }}</p>
</div>
</div>
</barcode-scanner>
Although it works, it only functions when the input field is visible on the screen and focused.
Is there a way to make it work with a hidden input? (I tried using input type="hidden", as well as input type="text" with a display:none style attribute but neither worked.)
Additionally, is it possible to capture the keypress event on the document itself, rather than on a specified input?