Как исправить ошибки, вызванные неправильной раскладкой клавиатуры в текстовом поле

У меня есть приложение, которое в основном предназначено для изучения нового языка. В моем приложении есть поле ввода, которое ожидает текст на языке, который изучает пользователь. Поэтому, если пользователь сосредотачивается на вводе, в идеале я хочу автоматически переключать макет на целевой язык. Чтобы сделать взаимодействие с пользователем более приятным (вам не нужно беспокоиться о неправильном макете).

Что я знаю и пробовал

  1. Насколько я знаю, браузеры не могут предоставить API, который я могу использовать для определения текущего макета.
  2. Я попытался определить, не является ли последний введенный символ типичным символ для целевого языка, то я использую свое сопоставление между кодами клавиш и буквами целевого языка и заменяю этот введенный символ в определенной позиции во вводе. После этого я получаю сброс каретки. Поэтому я возвращаю его в предыдущее положение.

Проблема со вторым подходом в том, что если вы набираете достаточно быстро, вы можете столкнуться с проблемами с положением курсора. И это приводит к неправильной строке ввода.

Есть ли у вас идеи, как добиться такого поведения, которое работает, даже когда вы набираете текст со скоростью, когда вы почти сразу нажимаете две клавиши одновременно время?

PS Код для описанного подхода

  const codeToEn = {65: 'a',//... и так далее} const acceptChars =/^ [a-zA-Z0-  9. + _) (% @!?, & $ * '"` ~] + $/G; document.getElementById (' some-input-id '). AddEventListener (' keyup ', function (e) {if (  codeToEn [e.which] &&! acceptChars.test (this.value)) {const char = codeToEn [e.which]; const {selectionStart, selectionEnd} = this; const currentVal = this.value; let leftPart = currentVal.substring  (0, selectionStart - 1); let rightPart = currentVal.substring (selectionStart); this.value = leftPart + char + rightPart; this.setSelectionRange (selectionStart, selectionEnd);}});  

Convert Layout поможет вам: https://github.com/ai/convert-layout

Он очень маленький и поддерживает множество языков.


Прежде чем вы изучите приведенный ниже код, обратите внимание, что мое решение предполагает, что все пользователи используют QWERTY/ ЙЦУКЕН раскладка клавиатуры. Это может быть огромным упрощением, и вы необходимо найти более сложный подход к определению раскладки клавиатуры (как правило, все дело в поиске правильного сопоставления символов).

Более полезная часть здесь — это быстрая замена символов. Так что печатайте быстро или даже копируйте и вставляйте текст. Надеюсь, это поможет!

  const En = "qwertyuiop [] asdfghjkl; 'zxcvbnm ,.  ", Ru =" йцукенгшщзхъфывапролджэячсмитьбю "; const RuEn = [... Ru] .reduce ((a, e, i) => (a [e] = En [i]) && (a [e.toUpperCase ()]  = En [i] .toUpperCase ()) && a, {}); let corrected = 0; document.getElementById ('ta'). AddEventListener ('input', function () {let end = this.selectionEnd; for (  пусть i = !! исправлено * (this.value. длина - исправленная - 1);  я  
    


Прежде чем вы изучите приведенный ниже код, обратите внимание, что мое решение предполагает что все пользователи используют раскладку клавиатуры QWERTY/ЙЦУКЕН . Это может быть огромным упрощением, и вам придется найти более сложный подход к обнаружению раскладки клавиатуры (обычно все дело в поиске правильного сопоставления символов).

Более полезная часть здесь — это быстрая замена символов. Так что печатайте быстро или даже копируйте и вставляйте текст. Надеюсь, это поможет!

  const En = "qwertyuiop [] asdfghjkl; 'zxcvbnm ,.  ", Ru =" йцукенгшщзхъфывапролджэячсмитьбю "; const RuEn = [... Ru] .reduce ((a, e, i) => (a [e] = En [i]) && (a [e.toUpperCase ()]  = En [i] .toUpperCase ()) && a, {}); let corrected = 0; document.getElementById ('ta'). AddEventListener ('input', function () {let end = this.selectionEnd; for (  let i = !! исправлено * (this.value.length - исправлено - 1); i  
    

Оцените статью
techsly.ru
Добавить комментарий