CODEWITHSUNDEEP
javascriptjqueryhtml
NightWhisper
NightWhisper

Reputation: 530

Jquery Keyboard Event trigger

I am trying to simulate a Keyboard event with jquery. What I want is when I click a button, I want a character to appear in a textarea. I need the action to be a keyboard simulation not a simple append. I have tried all the possible solutions on the web without any success, so I would be grateful if anyone can help me.

Here is my HTML/JS/Jquery code :

<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>

As you can see, when the button is clicked, I only get a focus on the text element, but no character appears, any ideas?

looks like I was not clear enough. Here is another sample, I am using the MouseTrap library to capture keyboard events. Here is my code.

<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>

With this code, whenever you press '4' on the keyboard, an alert box will appear. All I want is when I click the button, the same event to be created. Ideas?

Upvotes: 0

Views: 2400

Answers (4)

Somwang Souksavatd
Somwang Souksavatd

Reputation: 5085

try this 

<input id="field">

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

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

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

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

});

Upvotes: 0

BornToCode
BornToCode

Reputation: 10233

It doesn't seem possible to acheieve this without appending the characters manually to the textarea.

The answers that @HighKickX and @claustrofob wrote only triggers the event handler as if the specificed key was pressed, but not actually presses that key like happens when a key is pressed on the keyboard (probably due to security reasons).

Because only the event is fired but the key is not actually pressed the textarea won't have that character added automatically.

Upvotes: 0

claustrofob
claustrofob

Reputation: 4994

Javascript does not perform default actions when you fire it from javascript. So the only way is to create your own vent handler :

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
});

Upvotes: 1

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 2090

Here is one solution to simulate the keypress :

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!');
});

Here is a jsfiddle demo.

Upvotes: 1

Related Questions