From 7497f9366ff42ad649bd157157d6d4328b3c1aaf Mon Sep 17 00:00:00 2001 From: morethanwords Date: Wed, 24 Nov 2021 17:40:18 +0400 Subject: [PATCH] Detect key from keyboard event by key property --- src/components/appMediaViewerBase.ts | 11 +++-- src/components/appNavigationController.ts | 3 +- src/components/chat/input.ts | 43 ++++++++++--------- src/components/chat/markupTooltip.ts | 3 +- src/components/popups/index.ts | 3 +- src/components/sidebarLeft/tabs/2fa/email.ts | 3 +- .../sidebarLeft/tabs/2fa/enterPassword.ts | 3 +- src/components/sidebarLeft/tabs/2fa/hint.ts | 3 +- .../sidebarLeft/tabs/2fa/reEnterPassword.ts | 3 +- src/components/telInputField.ts | 4 +- src/helpers/dom/attachListNavigation.ts | 10 +++-- src/helpers/dom/getKeyFromEvent.ts | 21 +++++++++ .../dom/getKeyFromEventCaseInsensitive.ts | 12 ++++++ src/helpers/dom/isSendShortcutPressed.ts | 3 +- src/lib/appManagers/appImManager.ts | 16 ++++--- src/lib/mediaPlayer.ts | 17 +++++--- src/pages/pagePassword.ts | 3 +- src/pages/pageSignIn.ts | 8 ++-- 18 files changed, 113 insertions(+), 56 deletions(-) create mode 100644 src/helpers/dom/getKeyFromEvent.ts create mode 100644 src/helpers/dom/getKeyFromEventCaseInsensitive.ts diff --git a/src/components/appMediaViewerBase.ts b/src/components/appMediaViewerBase.ts index 722f4157..2c0d7b61 100644 --- a/src/components/appMediaViewerBase.ts +++ b/src/components/appMediaViewerBase.ts @@ -42,6 +42,7 @@ import EventListenerBase from "../helpers/eventListenerBase"; import { MyMessage } from "../lib/appManagers/appMessagesManager"; import RichTextProcessor from "../lib/richtextprocessor"; import { NULL_PEER_ID } from "../lib/mtproto/mtproto_config"; +import getKeyFromEventCaseInsensitive from "../helpers/dom/getKeyFromEventCaseInsensitive"; const ZOOM_STEP = 0.5; const ZOOM_INITIAL_VALUE = 1; @@ -491,15 +492,17 @@ export default class AppMediaViewerBase< if(rootScope.overlaysActive > 1) { return; } + + const key = getKeyFromEventCaseInsensitive(e); let good = true; - if(e.key === 'ArrowRight') { + if(key === 'ArrowRight') { this.buttons.next.click(); - } else if(e.key === 'ArrowLeft') { + } else if(key === 'ArrowLeft') { this.buttons.prev.click(); - } else if(e.key === '-' || e.key === '=') { + } else if(key === '-' || key === '=') { if(this.ctrlKeyDown) { - this.changeZoom(e.key === '='); + this.changeZoom(key === '='); } } else { good = false; diff --git a/src/components/appNavigationController.ts b/src/components/appNavigationController.ts index 52a20c48..b8b00b3a 100644 --- a/src/components/appNavigationController.ts +++ b/src/components/appNavigationController.ts @@ -12,6 +12,7 @@ import blurActiveElement from "../helpers/dom/blurActiveElement"; import { cancelEvent } from "../helpers/dom/cancelEvent"; import { indexOfAndSplice } from "../helpers/array"; import isSwipingBackSafari from "../helpers/dom/isSwipingBackSafari"; +import getKeyFromEvent from "../helpers/dom/getKeyFromEvent"; export type NavigationItem = { type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | @@ -63,7 +64,7 @@ export class AppNavigationController { window.addEventListener('keydown', (e) => { const item = this.navigations[this.navigations.length - 1]; if(!item) return; - if(e.key === 'Escape' && (item.onEscape ? item.onEscape() : true)) { + if(getKeyFromEvent(e) === 'Escape' && (item.onEscape ? item.onEscape() : true)) { cancelEvent(e); this.back(item.type); } diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index c08acc9c..004da3b5 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -82,6 +82,8 @@ import MEDIA_MIME_TYPES_SUPPORTED from '../../environment/mediaMimeTypesSupport' import appMediaPlaybackController from '../appMediaPlaybackController'; import { NULL_PEER_ID } from '../../lib/mtproto/mtproto_config'; import setCaretAt from '../../helpers/dom/setCaretAt'; +import getKeyFromEvent from '../../helpers/dom/getKeyFromEvent'; +import getKeyFromEventCaseInsensitive from '../../helpers/dom/getKeyFromEventCaseInsensitive'; const RECORD_MIN_TIME = 500; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; @@ -947,15 +949,16 @@ export default class ChatInput { private attachMessageInputListeners() { this.listenerSetter.add(this.messageInput)('keydown', (e: KeyboardEvent) => { + const key = getKeyFromEvent(e); if(isSendShortcutPressed(e)) { cancelEvent(e); this.sendMessage(); } else if(e.ctrlKey || e.metaKey) { this.handleMarkdownShortcut(e); - } else if((e.key === 'PageUp' || e.key === 'PageDown') && !e.shiftKey) { // * fix pushing page to left (Chrome Windows) + } else if((key === 'PageUp' || key === 'PageDown') && !e.shiftKey) { // * fix pushing page to left (Chrome Windows) e.preventDefault(); - if(e.key === 'PageUp') { + if(key === 'PageUp') { const range = document.createRange(); const sel = window.getSelection(); @@ -1152,32 +1155,30 @@ export default class ChatInput { 'I': 'italic', 'U': 'underline', 'S': 'strikethrough', - 'M': 'monospace', - 'K': 'link' + 'M': 'monospace' }; + if(this.appImManager.markupTooltip) { + formatKeys['K'] = 'link'; + } + + const key = getKeyFromEventCaseInsensitive(e); + const applyMarkdown = formatKeys[key]; + const selection = document.getSelection(); - if(selection.toString().trim().length) { - for(const key in formatKeys) { - const good = e.code === ('Key' + key); - - if(good) { - // * костыльчик - if(key === 'K' && this.appImManager.markupTooltip) { - this.appImManager.markupTooltip.showLinkEditor(); - cancelEvent(e); - break; - } - - this.applyMarkdown(formatKeys[key]); - cancelEvent(e); // cancel legacy event - break; - } + if(selection.toString().trim().length && applyMarkdown) { + // * костыльчик + if(key === 'K') { + this.appImManager.markupTooltip.showLinkEditor(); + } else { + this.applyMarkdown(applyMarkdown); } + + cancelEvent(e); // cancel legacy event } //return; - if(e.code === 'KeyZ') { + if(key === 'Z') { let html = this.messageInput.innerHTML; if(e.shiftKey) { diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts index 1b2a4323..16ede6da 100644 --- a/src/components/chat/markupTooltip.ts +++ b/src/components/chat/markupTooltip.ts @@ -17,6 +17,7 @@ import { attachClickEvent } from "../../helpers/dom/clickEvent"; import getSelectedNodes from "../../helpers/dom/getSelectedNodes"; import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty"; import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue"; +import getKeyFromEvent from "../../helpers/dom/getKeyFromEvent"; //import { logger } from "../../lib/logger"; export default class MarkupTooltip { @@ -80,7 +81,7 @@ export default class MarkupTooltip { this.linkInput.addEventListener('keydown', (e) => { const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value); - if(e.code === 'Enter') { + if(getKeyFromEvent(e) === 'Enter') { if(!valid) { if(this.linkInput.classList.contains('error')) { this.linkInput.classList.remove('error'); diff --git a/src/components/popups/index.ts b/src/components/popups/index.ts index 56a6531a..f9a99e04 100644 --- a/src/components/popups/index.ts +++ b/src/components/popups/index.ts @@ -15,6 +15,7 @@ import ListenerSetter from "../../helpers/listenerSetter"; import { attachClickEvent, simulateClickEvent } from "../../helpers/dom/clickEvent"; import isSendShortcutPressed from "../../helpers/dom/isSendShortcutPressed"; import { cancelEvent } from "../../helpers/dom/cancelEvent"; +import getKeyFromEvent from "../../helpers/dom/getKeyFromEvent"; export type PopupButton = { text?: string, @@ -167,7 +168,7 @@ export default class PopupElement { // cannot add event instantly because keydown propagation will fire it setTimeout(() => { this.listenerSetter.add(document.body)('keydown', (e) => { - if(this.confirmShortcutIsSendShortcut ? isSendShortcutPressed(e) : e.key === 'Enter') { + if(this.confirmShortcutIsSendShortcut ? isSendShortcutPressed(e) : getKeyFromEvent(e) === 'Enter') { simulateClickEvent(this.btnConfirmOnEnter); cancelEvent(e); } diff --git a/src/components/sidebarLeft/tabs/2fa/email.ts b/src/components/sidebarLeft/tabs/2fa/email.ts index f3732955..255183c5 100644 --- a/src/components/sidebarLeft/tabs/2fa/email.ts +++ b/src/components/sidebarLeft/tabs/2fa/email.ts @@ -20,6 +20,7 @@ import PopupPeer from "../../../popups/peer"; import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { canFocus } from "../../../../helpers/dom/canFocus"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; +import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent"; export default class AppTwoStepVerificationEmailTab extends SliderSuperTab { public inputField: InputField; @@ -72,7 +73,7 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab { }); inputField.input.addEventListener('keypress', (e) => { - if(e.key === 'Enter') { + if(getKeyFromEvent(e) === 'Enter') { cancelEvent(e); return onContinueClick(); } diff --git a/src/components/sidebarLeft/tabs/2fa/enterPassword.ts b/src/components/sidebarLeft/tabs/2fa/enterPassword.ts index 56e97e55..902d7d40 100644 --- a/src/components/sidebarLeft/tabs/2fa/enterPassword.ts +++ b/src/components/sidebarLeft/tabs/2fa/enterPassword.ts @@ -10,6 +10,7 @@ import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { canFocus } from "../../../../helpers/dom/canFocus"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; import replaceContent from "../../../../helpers/dom/replaceContent"; +import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent"; import { AccountPassword } from "../../../../layer"; import I18n, { i18n } from "../../../../lib/langPack"; import passwordManager from "../../../../lib/mtproto/passwordManager"; @@ -64,7 +65,7 @@ export default class AppTwoStepVerificationEnterPasswordTab extends SliderSuperT textEl.update(); } - if(e.key === 'Enter') { + if(getKeyFromEvent(e) === 'Enter') { return onContinueClick(); } }); diff --git a/src/components/sidebarLeft/tabs/2fa/hint.ts b/src/components/sidebarLeft/tabs/2fa/hint.ts index fa6967b5..f37284a4 100644 --- a/src/components/sidebarLeft/tabs/2fa/hint.ts +++ b/src/components/sidebarLeft/tabs/2fa/hint.ts @@ -16,6 +16,7 @@ import { toast } from "../../../toast"; import I18n from "../../../../lib/langPack"; import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; +import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent"; export default class AppTwoStepVerificationHintTab extends SliderSuperTab { public inputField: InputField; @@ -62,7 +63,7 @@ export default class AppTwoStepVerificationHintTab extends SliderSuperTab { }); inputField.input.addEventListener('keypress', (e) => { - if(e.key === 'Enter') { + if(getKeyFromEvent(e) === 'Enter') { cancelEvent(e); return inputField.value ? onContinueClick() : onSkipClick(); } diff --git a/src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts b/src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts index bd600797..c1aecff9 100644 --- a/src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts +++ b/src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts @@ -14,6 +14,7 @@ import AppTwoStepVerificationHintTab from "./hint"; import { InputState } from "../../../inputField"; import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; +import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent"; export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSuperTab { public state: AccountPassword; @@ -51,7 +52,7 @@ export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSupe passwordInputField.setState(InputState.Neutral); } - if(e.key === 'Enter') { + if(getKeyFromEvent(e) === 'Enter') { return onContinueClick(); } }); diff --git a/src/components/telInputField.ts b/src/components/telInputField.ts index b3d61318..5570a994 100644 --- a/src/components/telInputField.ts +++ b/src/components/telInputField.ts @@ -9,6 +9,7 @@ import { formatPhoneNumber } from "../helpers/formatPhoneNumber"; import { IS_APPLE, IS_ANDROID, IS_APPLE_MOBILE } from "../environment/userAgent"; import { HelpCountry, HelpCountryCode } from "../layer"; import InputField, { InputFieldOptions } from "./inputField"; +import getKeyFromEvent from "../helpers/dom/getKeyFromEvent"; export default class TelInputField extends InputField { private pasted = false; @@ -97,7 +98,8 @@ export default class TelInputField extends InputField { telEl.addEventListener('keypress', (e) => { //console.log('keypress', this.value); - if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && e.key !== 'Backspace' && !(e.key === '+' && e.shiftKey/* && !this.value */)) { + const key = getKeyFromEvent(e); + if(/\D/.test(key) && !(e.metaKey || e.ctrlKey) && key !== 'Backspace' && !(key === '+' && e.shiftKey/* && !this.value */)) { e.preventDefault(); return false; } diff --git a/src/helpers/dom/attachListNavigation.ts b/src/helpers/dom/attachListNavigation.ts index 0c7a21ae..0d3d652b 100644 --- a/src/helpers/dom/attachListNavigation.ts +++ b/src/helpers/dom/attachListNavigation.ts @@ -5,6 +5,7 @@ */ import fastSmoothScroll from "../fastSmoothScroll"; +import getKeyFromEventCaseInsensitive from "./getKeyFromEventCaseInsensitive"; import { cancelEvent } from "./cancelEvent"; import { attachClickEvent, detachClickEvent } from "./clickEvent"; import findUpAsChild from "./findUpAsChild"; @@ -88,8 +89,9 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo } let onKeyDown = (e: KeyboardEvent) => { - if(!keyNames.has(e.key as any)) { - if(e.key === 'Enter' || (type !== 'xy' && e.key === 'Tab')) { + const key = getKeyFromEventCaseInsensitive(e); + if(!keyNames.has(key as any)) { + if(key === 'Enter' || (type !== 'xy' && key === 'Tab')) { cancelEvent(e); fireSelect(getCurrentTarget()); } @@ -101,7 +103,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo if(list.childElementCount > 1) { let currentTarget = getCurrentTarget(); - currentTarget = handleArrowKey(currentTarget, e.key as any); + currentTarget = handleArrowKey(currentTarget, key as any); setCurrentTarget(currentTarget, true); } }; @@ -152,7 +154,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo if(waitForKey) { const _onKeyDown = onKeyDown; onKeyDown = (e) => { - if(e.key === waitForKey) { + if(getKeyFromEventCaseInsensitive(e) === waitForKey) { cancelEvent(e); document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true}); diff --git a/src/helpers/dom/getKeyFromEvent.ts b/src/helpers/dom/getKeyFromEvent.ts new file mode 100644 index 00000000..ae7851a4 --- /dev/null +++ b/src/helpers/dom/getKeyFromEvent.ts @@ -0,0 +1,21 @@ +/* + * https://github.com/morethanwords/tweb + * Copyright (C) 2019-2021 Eduard Kuzmenko + * https://github.com/morethanwords/tweb/blob/master/LICENSE + */ + +export default function getKeyFromEvent(e: KeyboardEvent) { + let key = e.key; + if(!key) { + key = e.code; + if(key.startsWith('Key')) { + key = e.code.slice(3); + + if(!e.shiftKey && key.length < 2) { + key = key.toLowerCase(); + } + } + } + + return key; +} diff --git a/src/helpers/dom/getKeyFromEventCaseInsensitive.ts b/src/helpers/dom/getKeyFromEventCaseInsensitive.ts new file mode 100644 index 00000000..ba8b94db --- /dev/null +++ b/src/helpers/dom/getKeyFromEventCaseInsensitive.ts @@ -0,0 +1,12 @@ +/* + * https://github.com/morethanwords/tweb + * Copyright (C) 2019-2021 Eduard Kuzmenko + * https://github.com/morethanwords/tweb/blob/master/LICENSE + */ + +import getKeyFromEvent from "./getKeyFromEvent"; +import { capitalizeFirstLetter } from "../string"; + +export default function getKeyFromEventCaseInsensitive(e: KeyboardEvent) { + return capitalizeFirstLetter(getKeyFromEvent(e)); +} diff --git a/src/helpers/dom/isSendShortcutPressed.ts b/src/helpers/dom/isSendShortcutPressed.ts index c66a418d..199d8bea 100644 --- a/src/helpers/dom/isSendShortcutPressed.ts +++ b/src/helpers/dom/isSendShortcutPressed.ts @@ -6,9 +6,10 @@ import rootScope from "../../lib/rootScope"; import { IS_MOBILE, IS_APPLE } from "../../environment/userAgent"; +import getKeyFromEvent from "./getKeyFromEvent"; export default function isSendShortcutPressed(e: KeyboardEvent) { - if(e.key === 'Enter' && !IS_MOBILE && !e.isComposing) { + if(getKeyFromEvent(e) === 'Enter' && !IS_MOBILE && !e.isComposing) { /* if(e.ctrlKey || e.metaKey) { this.messageInput.innerHTML += '
'; placeCaretAtEnd(this.message) diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 168c37c9..a515e3c7 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -72,6 +72,7 @@ import { NULL_PEER_ID } from '../mtproto/mtproto_config'; import telegramMeWebManager from '../mtproto/telegramMeWebManager'; import { ONE_DAY } from '../../helpers/date'; import { numberThousandSplitter } from '../../helpers/number'; +import getKeyFromEventCaseInsensitive from '../../helpers/dom/getKeyFromEventCaseInsensitive'; //console.log('appImManager included33!'); @@ -440,7 +441,8 @@ export class AppImManager { private attachKeydownListener() { const IGNORE_KEYS = new Set(['PageUp', 'PageDown', 'Meta', 'Control']); const onKeyDown = (e: KeyboardEvent) => { - if(rootScope.isOverlayActive || IGNORE_KEYS.has(e.key)) return; + const key = getKeyFromEventCaseInsensitive(e); + if(rootScope.isOverlayActive || IGNORE_KEYS.has(key)) return; const target = e.target as HTMLElement; @@ -450,19 +452,19 @@ export class AppImManager { const chat = this.chat; - if(e.code === 'KeyC' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') { + if(key === 'C' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') { return; - } else if(e.altKey && (e.code === 'ArrowUp' || e.code === 'ArrowDown')) { + } else if(e.altKey && (key === 'ArrowUp' || key === 'ArrowDown')) { const folder = appMessagesManager.dialogsStorage.getFolderDialogs(rootScope.filterId, true); let nextDialog: Dialog.dialog; if(!rootScope.peerId) { - if(e.code === 'ArrowDown') { + if(key === 'ArrowDown') { nextDialog = folder[0]; } } else { const idx = folder.findIndex(dialog => dialog.peerId === rootScope.peerId); if(idx !== -1) { - const nextIndex = e.code === 'ArrowUp' ? idx - 1 : idx + 1; + const nextIndex = key === 'ArrowUp' ? idx - 1 : idx + 1; nextDialog = folder[nextIndex]; } } @@ -470,7 +472,7 @@ export class AppImManager { if(nextDialog) { this.setPeer(nextDialog.peerId); } - } else if(e.code === 'ArrowUp') { + } else if(key === 'ArrowUp') { if(!chat.input.editMsgId && chat.input.isInputEmpty()) { const historyStorage = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId); const slice = historyStorage.history.slice; @@ -499,7 +501,7 @@ export class AppImManager { } else { return; } - } else if(e.code === 'ArrowDown') { + } else if(key === 'ArrowDown') { return; } diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index bcd590e0..073c6b90 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -18,6 +18,7 @@ import rootScope from "./rootScope"; import findUpClassName from "../helpers/dom/findUpClassName"; import { GrabEvent } from "../helpers/dom/attachGrabListeners"; import { attachClickEvent } from "../helpers/dom/clickEvent"; +import getKeyFromEventCaseInsensitive from "../helpers/dom/getKeyFromEventCaseInsensitive"; export class MediaProgressLine extends RangeSelector { protected filledLoad: HTMLDivElement; @@ -386,19 +387,21 @@ export default class VideoPlayer extends EventListenerBase<{ return; } + const key = getKeyFromEventCaseInsensitive(e); + let good = true; - if(e.code === 'KeyF') { + if(key === 'F') { this.toggleFullScreen(fullScreenButton); - } else if(e.code === 'KeyM') { + } else if(key === 'M') { appMediaPlaybackController.muted = !appMediaPlaybackController.muted; - } else if(e.code === 'Space') { + } else if(key === ' ') { this.togglePlay(); - } else if(e.altKey && e.code === 'Equal') { + } else if(e.altKey && key === '=') { appMediaPlaybackController.playbackRate += .25; - } else if(e.altKey && e.code === 'Minus') { + } else if(e.altKey && key === '-') { appMediaPlaybackController.playbackRate -= .25; - } else if(this.wrapper.classList.contains('ckin__fullscreen') && (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) { - if(e.code === 'ArrowLeft') appMediaPlaybackController.seekBackward({action: 'seekbackward'}); + } else if(this.wrapper.classList.contains('ckin__fullscreen') && (key === 'ArrowLeft' || key === 'ArrowRight')) { + if(key === 'ArrowLeft') appMediaPlaybackController.seekBackward({action: 'seekbackward'}); else appMediaPlaybackController.seekForward({action: 'seekforward'}); } else { good = false; diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts index b2e34f14..ee23e202 100644 --- a/src/pages/pagePassword.ts +++ b/src/pages/pagePassword.ts @@ -21,6 +21,7 @@ import { attachClickEvent } from '../helpers/dom/clickEvent'; import htmlToSpan from '../helpers/dom/htmlToSpan'; import replaceContent from '../helpers/dom/replaceContent'; import toggleDisability from '../helpers/dom/toggleDisability'; +import getKeyFromEvent from '../helpers/dom/getKeyFromEvent'; const TEST = false; let passwordInput: HTMLInputElement; @@ -125,7 +126,7 @@ let onFirstMount = (): Promise => { this.classList.remove('error'); btnNextI18n.update({key: 'Login.Next'}); - if(e.key === 'Enter') { + if(getKeyFromEvent(e) === 'Enter') { return onSubmit(); } }); diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index aee48894..eef2bc3c 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -40,6 +40,7 @@ import stateStorage from "../lib/stateStorage"; import rootScope from "../lib/rootScope"; import TelInputField from "../components/telInputField"; import IS_EMOJI_SUPPORTED from "../environment/emojiSupport"; +import getKeyFromEvent from "../helpers/dom/getKeyFromEvent"; //import _countries from '../countries_pretty.json'; let btnNext: HTMLButtonElement = null, btnQr: HTMLButtonElement; @@ -232,7 +233,8 @@ let onFirstMount = () => { }, {capture: true}); */ countryInput.addEventListener('keyup', (e) => { - if(e.ctrlKey || e.key === 'Control') return false; + const key = getKeyFromEvent(e); + if(e.ctrlKey || key === 'Control') return false; //let i = new RegExp('^' + this.value, 'i'); let _value = countryInputField.value.toLowerCase(); @@ -257,7 +259,7 @@ let onFirstMount = () => { countries.forEach((c) => { liMap.get(c.iso2).forEach(li => li.style.display = ''); }); - } else if(matches.length === 1 && e.key === 'Enter') { + } else if(matches.length === 1 && key === 'Enter') { selectCountryByTarget(liMap.get(matches[0].iso2)[0]); } }); @@ -302,7 +304,7 @@ let onFirstMount = () => { telEl.addEventListener('keypress', (e) => { //console.log('keypress', this.value); - if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key === 'Enter') { + if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ getKeyFromEvent(e) === 'Enter') { return onSubmit(); } });