Как слушать события keyup вне любого ввода на iOS с Ionic 3 - PullRequest
0 голосов
/ 15 января 2019

Моя проблема довольно проста, и я думаю, что знаю ответ, но если я ошибаюсь, это может быть здорово ...
Я хотел бы использовать внешний сканер штрих-кода (работает как физическая клавиатура Bluetooth) для чтения штрих-кодов, но вне любого ввода.
Я сделал кусок кода, который прекрасно работает на устройствах Android, но ничего не случилось на устройствах iOS ...
Я сделаю это быстро, я слушаю события «keyup» в «окне», и когда я ловлю клавишу «Enter», я генерирую событие штрих-кода…
Я использую RxJS и Observable fromEvent, и все отлично работает на устройствах Android.

Является ли проблема с Safari WebView?
Я помню, у меня уже была такая же проблема на веб-сайте, Safari не запускает события клавиатуры вне элементов, которые не требуют клавиатуры (input, textarea…)

/**
 * Outil pour traiter la lecture d'un codebarre par un lecteur physique
 * Seuls les évènements claviers hors input sont récupérés
 */
export namespace LecteurCodebarrePhysique {
    // L'évènement est-il dans un input ?
    const inInput = (event) => {return event.target instanceof Element && event.target.nodeName.toLowerCase() === 'input'};
    // La touche relachée est-elle un caractère ?
    const isTextKey = (event) => {return !inInput(event) && event.key.length === 1};
    // La touche relachée est-elle la touche entrée ?
    const isEnter = (event) => {return !inInput(event) && event.keyCode === 13};

    /**
     * Observable émettant le codebarre lu par un lecteur physique
     */
    export function codebarreLu(): Observable<{text: string, format: string}> {
        // Observable initiale : évèrement clavier
        const keyup: Observable<KeyboardEvent> = fromEvent(window, 'keyup');
        return keyup.pipe(
            // On ne garde que les touches représentant un caractère
            filter(ev => isTextKey(ev)),
            // On ne garde que la valeur du caractère
            map(ev => ev.key),
            // On «bufferise» en attendant la touche entrée
            buffer(keyup.pipe(filter(ev => {
                const enter = isEnter(ev);
                if (enter) {
                    ev.preventDefault();
                    ev.stopPropagation();
                }
                return enter;
            }))),
            // Quand la touche entrée est relachée, on concatène les caractères
            // Et on essaye de déterminer si c'es un EAN13 (13 caractères numériques)
            map(chars => {
                const codebarre = chars.reduce((code, char) => code + char, '');
                const isEan13 = /\d{13}/.test(codebarre);
                return {text: codebarre, format: isEan13 ? 'EAN_13' : 'INCONNU'};
            })
        );
    }
}

На устройствах Android, если я подписываюсь на наблюдаемый и считываю штрих-код за пределами любых входных данных, вызывается код внутри подписки. На устройствах iOS ничего не происходит…

1 Ответ

0 голосов
/ 16 января 2019

Эврика!
Если у других парней есть такая же проблема / потребность во мне, я отправлю здесь ответ! Да, я слишком добрый ^^
Я изменил цель события с «окна» на «документ» и… подожди… Это работает.

...