ASCII control character html input text
I've been struggling with this at work for the past week as well, and I finally made a breakthrough today. I don't know how your barcode scanner works, but ours acts like a USB keyboard and sends individual keypresses. It does send the keypress for [GS], but the event is automatically canceled by the browser. Therefore it never reaches the input event, which is the event that adds the character to your input. I couldn't figure out a way to prevent it from canceling, but you can get around this by adding the character to the input manually in the keypress event.
I don't know what framework you are working with for your application, but I was able to get this to work with AngularJS by building this into a custom directive. The example below is just vanilla JavaScript, but you should be able to implement it into any framework that you may be using.
Vanilla JavaScript Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Control Character Test</title>
</head>
<body>
<input type="text" id="tacos" />
<script>
document.getElementById('tacos').addEventListener('keypress', function(e) {
if (e.charCode === 29) {
this.value += String.fromCharCode(e.which);
}
});
</script>
</body>
</html>
You can save the code above into an HTML file to test if this approach works with your barcode scanner. If this doesn't work as is, another possibility worth exploring is reprogramming your barcode scanner to send every keypress, and then this approach should work.
Another Relevant Behavior
In my research, I also figured out that inputs do accept these characters if they are sent with other characters at the same time. For example, we have another barcode scanner that sends the barcode data as one event. The browser accepts this input with the [GS] character. You can also do this with copy/paste. You could potentially exploit this behavior to get what you want as well.
Browser Problems
It is worth keeping in mind that you might also run into problems with either of these approaches because of the browser you are using. Our barcode scanner that sends the data all at once is an android device. It has 2 browsers on it, chromium and a proprietary browser. The [GS] character shows up in chromium, but not the proprietary browser.
Hope this helps!
The input control ignores non printable characters like [GS]
However, a barcode scanner usually emulates this character with CTRL+], which can be captured with the onkeydown event (key codes 17 and 221):
var ctrlPressed = false;
yourInput.addEventListener('onkeydown', function (event) {
ctrlPressed = 17 === event.keyCode;
if (221 === event.keyCode && ctrlPressed)
// do what you want here (ie. modify the input value)
});
If this does not work you may want to check the codes first by logging them:
yourInput.addEventListener('onkeydown', function (event) {
console.log(event.keyCode)
});