ASCII управляющий символ html ввод текста
Я пытаюсь обработать ввод со сканера штрих-кодов в браузере javascript. Вывод сканера представляет собой строку символов, которая также содержит по крайней мере один символ разделителя групп (ASCII 29).
Когда я направляю входные данные в т. е. notepad++, входные данные отображаются правильно, включая символы разделителя групп. Когда я направляю входные данные в поле <input type="text"> html, объекты-разделители групп теряются; они не видны в поле и не обнаруживаются с помощью javascript код.
Усекает ли объект <input type="text"> управляющие символы ASCII? Есть идеи, как этого избежать?
Редактировать:
Для этого я использую код, аналогичный ответу Raidox:
inputField.onkeypress = catchGroupSeparatorAndEnter;
var fncChar = String.fromCharCode(29);
function catchGroupSeparatorAndEnter(event) {
if (event.ctrlKey && event.which === 29) {
inputField.value = inputField.value + fncChar;
event.preventDefault();
event.stopPropagation();
}
...
}
Это, кажется, работает в Chrome и Edge, но не в Firefox. Я понятия не имею, как заставить его работать там.
3 ответов:
Я также боролся с этим на работе в течение прошлой недели, и сегодня я, наконец, сделал прорыв. Я не знаю, как работает ваш сканер штрих-кодов, но наш действует как USB-клавиатура и посылает отдельные нажатия клавиш. Он посылает нажатие клавиши для [GS], но событие автоматически отменяется браузером. Поэтому он никогда не достигает входного события, которое является событием, добавляющим символ к вашему входу. Я не мог придумать способ предотвратить его отмену, но вы можете получить вокруг этого путем добавления символа к вводу вручную в событии нажатия клавиши.
Я не знаю, с каким фреймворком вы работаете для вашего приложения, но я смог заставить это работать с AngularJS, встроив это в пользовательскую директиву. Приведенный ниже пример является просто ванильным JavaScript, но вы должны быть в состоянии реализовать его в любой фреймворк, который вы можете использовать.
Пример Ванильного JavaScript
<!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>Вы можете сохранить приведенный выше код в HTML-файл, чтобы проверить, если этот подход работает с вашим сканером штрих-кодов. Если это не работает как есть, еще одна возможность, которую стоит изучить, - это перепрограммирование сканера штрих-кодов для отправки каждого нажатия клавиши, и тогда этот подход должен работать.
Другое Релевантное Поведение
В своем исследовании я также выяснил, что входные данные действительно принимают эти символы, если они отправляются с другими символами одновременно. Например, у нас есть другой сканер штрих-кода, который отправляет данные штрих-кода как одно событие. Браузер принимает этот ввод с символом [GS]. Вы также можете сделать это с помощью копирования/вставки. Вы можете потенциально использовать это поведение, чтобы получить то, что вы хотите.Проблемы Браузера
Стоит иметь в виду, что вы также можете столкнуться с проблемами с любым из этих подходов из-за браузера, который вы используете. Наш сканер штрих-кодов, который отправляет данные сразу, - это android-устройство. Он имеет 2 браузера на нем, chromium и фирменный браузер. Символ [GS] появляется в chromium, но не фирменный браузер.
Надеюсь, это поможет!
Входное управление игнорирует непечатаемые символы, такие как [GS]
Однако сканер штрих-кода обычно эмулирует этот символ с помощью CTRL+], который может быть захвачен с помощью событияonkeydown (коды ключей 17 и 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) });Если это не работает, вы можете сначала проверить коды, записав их в журнал:
yourInput.addEventListener('onkeydown', function (event) { console.log(event.keyCode) });
У меня была та же проблема, и на основе идеи с прослушивателем событий я строю пользовательские решения для IE / Chrome и Firefox:
IE + Chrome (раствор Raidox):
document.getElementById('scanfield').addEventListener('keypress', function(e) { if (e.which === 29) { this.value += String.fromCharCode(e.which); } });Firefox:
var altValue = ''; document.getElementById('scanfield').addEventListener('keypress', function(e) { if(e.altKey){ altValue += String.fromCharCode(e.which) if(altValue == '0029'){ this.value += String.fromCharCode(29); altValue=''; } } });Edge работает из коробки.
Comments