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

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

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