如何修复文本字段中错误的键盘布局导致的错误

Question

我有一个应用程序主要是关于学习一门新语言。在我的应用程序中，有一个输入字段，它需要用户学习的语言中的文本。因此，如果用户专注于该输入，理想情况下，我希望自动将布局切换为目标语言。让用户体验更愉快（您不必担心错误的布局）。

我所知道并尝试过的

1. 据我所知，浏览器无法提供可用于确定当前布局的API。
2. 我试图检测最后输入的字符是否不是目标语言的典型字符，然后我使用键码和目标语言字母之间的映射，并将输入的字符替换为输入中的特定位置。之后，我重置了插入符号。所以我把它归还给以前的位置。

第二种方法存在的问题是，如果输入速度足够快，就会遇到插入符号位置的问题。并且它会在输入中导致错误的字符串。

您是否有任何想法如何实现这种行为，即使您在几乎立即同时按下两个键时以速度键入文本？

附：所描述方法的代码

 const codeToEn = {
    65: 'a',
    // ... and so on
 }


 const acceptableChars = /^[a-zA-Z0-9 .+_)(%@!?,&$*'"`~]+$/g;

 document.getElementById('some-input-id').addEventListener('keyup', function (e) {
    if (codeToEn[e.which]
        && !acceptableChars.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);
    }
});

Answer 1

转换布局将帮助您：https://github.com/ai/convert-layout

它非常小，支持多种语言。

Answer 2

在您查看下面的代码之前，请注意我的解决方案假设所有用户都使用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 = !!corrected * (this.value.length - corrected - 1); i < end; i++) {
    let s = RuEn[this.value[i]];
    if (s) this.value = this.value.split(this.value[i]).join(s);
  }
  this.selectionEnd = end;
  corrected = this.value.length - 1;
});

<textarea id="ta" cols="50" rows="10"></textarea>