使用 javascript 和 jquery 为 textarea 创建自定义键盘布局

Question

我想创建一个键盘站点，它有一个带文本区域的键盘（带有按钮的虚拟键盘）。这个项目分为两部分：
第一部分是在现场使用虚拟键盘打字我用按钮和 javascript 创建的，我结束了它，它工作正常。
第二部分是用真正的键盘打字，但在 textarea 上使用我们的自定义语言layuot。
我想捕捉输入的键，然后在我的代码中检查 shift 或 capslock 状态，将适当的字符（存在于我的自定义布局中）添加到 textarea。
如果我想让它更简单，我想在 qwerty 英文键盘中获取用户键并将其更改为其他字符，然后像自定义键盘布局一样添加到 textarea。
我们在 javascript 和 jquery 中工作的键上有三个事件，它们是 onkeypress 、 onkeydown 、 onkeyup。
onkeyup 的问题是当用户持有一个键并且我不能使用它时我无法控制文本区域。
我对 onpressed 和 onkeydown 的问题是它们的默认操作！他们在我的代码之后将 qwerty 英文字符添加到 textarea，我找不到禁用该操作的方法。

例如，我们在 textarea 中已经有一个像“abc”这样的文本，并且光标位置在 b 和 c 之间，当他按下 g 键时，用户想要在其中键入 X（假设在我的自定义键盘中它位于 g 键位置）我得到光标位置和其他东西并将X添加到“abXc”之类的字符串但是由于onpress默认操作它在X之后添加g并且我无法做任何事情，我尝试用keyup控制它但是当用户时问题变得更大拿着钥匙，我有“abXgXgXgXgXgXgXgXgXgc”！

我如何禁用它向 textarea 添加字符？

注意：在 keypress 和 keydown 之间，我更喜欢使用 keypress，因为我无法检测到 shift 和 capslock，并在代码中使用我自己的方式来处理 shift state 和 capslock。

Answer 1

您可以使用.preventDefault() 来阻止事件的默认行为发生。这个（有点傻的）示例说明了如何禁用 a 按钮，用于文本输入或 ID 为 demo 的文本区域：

$(function() {

    $("#demo").keypress(function(event) {
        if(event.which == 97) {
            //The user pressed "a".
            event.preventDefault();
        }
    });

});

您要做的是首先检查按下了哪个键（使用event.which），然后将该键的替换添加到文本区域，最后只需调用event.preventDefault() 来阻止用户实际键入的字符输出。

由于输出字符的是onkeypress事件，所以如果你想使用这种方法，你必须使用它而不是onkeyup或onkeydown。

• Documentation on jQuery
• Documentation on W3C