使用 javascript 和 jquery 为文本区域创建自定义键盘布局

Question

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

例如，我们在 textarea 中已经有一个像 "abc" 这样的文本，光标位置在 b 和 c 之间，用户想要在他按下时键入 X（假设在我的自定义键盘中它在 g 键位置） g 键我得到光标位置和其他东西并将 X 添加到 "abXc" 之类的字符串但是随后由于 onpress 默认操作它在 X 之后添加 g 我什么也做不了，我试图用 keyup 控制它但是问题当用户持有钥匙时变大，我有 "abXgXgXgXgXgXgXgXgXgc"!

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

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

Answer 1

您可以使用 .preventDefault() 来阻止事件的默认行为发生。这个（有点傻）示例说明了如何为 ID 为 demo:

的文本输入或文本区域禁用 a 按钮

$(function() {

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

});

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

因为输出字符的是 onkeypress 事件，所以如果要使用此方法，则必须使用它而不是 onkeyup 或 onkeydown。

使用 javascript 和 jquery 为文本区域创建自定义键盘布局

creating custom keyboard layout for textarea with javascript and jquery

html

javascript

keyboard

jquery

textarea