如何修复由文本字段中错误的键盘布局引起的错误

Question

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

我所知道和尝试过的

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

第二种方法的问题是，如果您输入足够快，您可能会遇到插入符号位置的问题。它会导致输入中出现错误的字符串。

您是否有任何想法如何实现即使在几乎立即同时按下两个键的情况下以极快的速度键入文本时也能正常工作的行为？

所描述方法的 PS 代码

 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

它真的很小，支持多种语言。