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

creating custom keyboard layout for textarea with javascript and jquery

本文关键字：创建 自定义 键盘 布局 textarea javascript jquery 使用      更新时间：2023-09-26

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

例如我们有一个文本"abc"已经在文本区域和光标位置b和c之间,用户想要输入X(假设我的自定义键盘在g键),当他按下g键我得到光标位置和其他东西,添加X这样的字符串"abXc",但之后由于onpress默认操作添加g X和我不能做任何事,我试着控制它与keyup但问题变大,当用户持有的关键,我有"abXgXgXgXgXgXgXgXgXgc"!

我如何能禁用它从添加字符到文本区?

注意:在按键和按键之间，我更喜欢使用按键，因为我不能检测移位和capslock，并在代码中使用我自己的方式来处理移位状态和capslock

您可以使用.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。

    jQuery文档
  • W3C文档
相关文章：