Question

我正在尝试使用jquery模拟Keyboard事件。我想要的是当我点击一个按钮时，我希望一个角色出现在textarea中。我需要将动作作为键盘模拟而不是简单的追加。我已经在网上尝试了所有可能的解决方案而没有任何成功，所以如果有人能帮助我，我将不胜感激。

这是我的HTML / JS / Jquery代码：

<html>
    <head></head>
    <body>
        <script type='text/javascript' src='jquery-1.9.1.min.js'></script>
        <input type='text' id="input"></input>
        <script type='text/javascript'>
            function simulateKeyPress() {
                document.getElementById("text").focus();
                var e = $.Event("keypress");
                e.which = 97;
                $("input").trigger(e);
            }
        </script>
        <br/>
        <button id="button" onclick='simulateKeyPress()'>Press Me</button>
    </body>
</html>

正如您所看到的，当单击按钮时，我只关注文本元素，但没有出现任何字符，有什么想法吗？

看起来我不够清楚。这是另一个示例，我使用MouseTrap库来捕获键盘事件。这是我的代码。

<html>
<header>
<title>test</title>
</header>
<script type='text/javascript' src='MouseTrap.js'></script>
<script type='text/javascript' src='jquery-1.9.1.min.js'></script>

<body>
<input type='text' class="mousetrap" id="input"></input>
<script type='text/javascript'>
Mousetrap.bind('4',  function(){alert("you pressed 4" );});
function simulateKeyPress(character) {
        document.getElementById("input").focus();
        var input = $('#input');
        input.val(input.val() + character);
}
</script>
<br/>
<button type="button" onclick='simulateKeyPress(4)'>Press Me</button>
</body>
</html>

使用此代码，无论何时按键盘上的“4”，都会出现一个警告框。我想要的就是当我点击按钮时，要创建相同的事件。想法？

Answer 1

这是一个模拟按键的解决方案：

var input = $('#input');

$('#button').click(function(){
    // Add a character to the input
    input.val(input.val() + 'x');
    // Trigger the keypress event
    input.keypress();
});

// Check if it work
input.on('keypress', function(){
    alert('key pressed!');
});

这是jsfiddle demo。

Answer 2

当您从javascript触发时，Javascript不会执行默认操作。因此，唯一的方法是创建自己的通风处理程序：

function simulateKeyPress() {
    document.getElementById("text").focus();
    var e = $.Event("keypress");
    e.which = 97;
    $("input").trigger(e);
}

$("input").on('keypress', function(e){
    //append e.which to your input here
});

Answer 3

如果不将字符手动附加到textarea，似乎无法实现此目的。

@HighKickX和@claustrofob编写的答案只会触发事件处理程序，就好像按下了特定键一样，但实际上并没有像键盘上按键那样按下那个键（可能是出于安全原因）。 / p>

因为只触发了事件但实际上没有按下该键，所以textarea不会自动添加该字符。

Answer 4

试试这个

<input id="field">

<button id="x" class="button">submit</button>

$(".button").click(function() {

   var value = $("#field").val();

   $("#field").val( $("#field").val() + value);

});

Jquery键盘事件触发器

4 个答案: