如何修复文本字段中错误的键盘布局导致的错误
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何修复文本字段中错误的键盘布局导致的错误相关的知识，希望对你有一定的参考价值。
我有一个应用程序主要是关于学习一门新语言。在我的应用程序中，有一个输入字段，它需要用户学习的语言中的文本。因此，如果用户专注于该输入，理想情况下，我希望自动将布局切换为目标语言。让用户体验更愉快（您不必担心错误的布局）。
我所知道并尝试过的
- 据我所知，浏览器无法提供可用于确定当前布局的API。
- 我试图检测最后输入的字符是否不是目标语言的典型字符，然后我使用键码和目标语言字母之间的映射，并将输入的字符替换为输入中的特定位置。之后，我重置了插入符号。所以我把它归还给以前的位置。
第二种方法存在的问题是，如果输入速度足够快，就会遇到插入符号位置的问题。并且它会在输入中导致错误的字符串。
您是否有任何想法如何实现这种行为，即使您在几乎立即同时按下两个键时以速度键入文本？
附：所描述方法的代码
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);
}
});
答案
转换布局将帮助您：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 (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>以上是关于如何修复文本字段中错误的键盘布局导致的错误的主要内容，如果未能解决你的问题，请参考以下文章