How can I trigger a KeyboardEvent (DOM_VK_UP) that is actually handled by the browser, exactly as if the user typed the key?

Question

Consider the following sample code, based on this answer.

<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(this).ready( function() {
    $("#foobar").keydown(function(e) {
      if (e.keyCode != KeyEvent.DOM_VK_UP) {
        console.log("Foo Bar");
        var f = jQuery.Event("keydown");
        f.which = KeyEvent.DOM_VK_UP;
        f.keyCode = KeyEvent.DOM_VK_UP; 
        $("#foobar").trigger(f);
        e.preventDefault();
        e.stopImmediatePropagation();
      }
      else {
        console.log("Hello World");
      }
    });
})
</script>
<div id="foobar" contenteditable="true"> 
  Foo Bar
  <br>
  Bar Bar
</div>
</body>

The output of this example is that the following is printed to the console very time a key is pressed. However, only when the real Up is pressed, does the cursor move up.

Foo Bar
Hello World

This implies that the trigger worked, but the cursor does not move up.

How can I make the cursor behave exactly as if the user had pressed the Up key on his keyboard when any key is pressed, not just a real Up?

I also tried the following way of triggering, which was also unsuccessful, despite printing true for success.

 var evt = document.createEvent("KeyboardEvent");                     
 evt.initKeyEvent ("keypress", true, true, window,                    
 0, 0, 0, 0, KeyEvent.DOM_VK_UP, KeyEvent.DOM_VK_UP);                 
 var success = document.getElementById("foobar").dispatchEvent(evt)   
 console.log(success)

guest271314 · Answer 1 · 2015-08-20T03:33:01.677

0

How can I make the key a appear in the div when any key is pressed, not just a real a?

Try substituting KeyboardEvent for KeyEvent , utilizing .html(function(index, html))

<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(this).ready( function() {
    $("#foobar").keydown(function(e) {
      if (e.keyCode != KeyboardEvent.DOM_VK_A) {
        console.log("Foo Bar");
        var f = jQuery.Event("keydown");
        f.which = KeyboardEvent.DOM_VK_A;
        f.keyCode = KeyboardEvent.DOM_VK_A; 
        $("#foobar").html(function(_, html) {
          return html + "a"
        }).trigger(f);
        e.preventDefault();
        e.stopImmediatePropagation();
      }
      else {
        console.log("Hello World");
      }
    });
})
</script>
<div id="foobar" contenteditable="true"> 
  Foo Bar
  <br>
  Bar Bar
</div>
</body>

edited Aug 20 '15 at 03:33

answered Aug 20 '15 at 03:26

guest271314

1
15
104
177

This works around the problem rather than solving it, unfortunately. I'll update my question, sorry. – merlin2011 Aug 20 '15 at 03:31
@merlin2011 _"I get exactly the same behavior. Also, the values are the same."_ Does `js` at stacksnippets return expected result ? Not certain about requirement ? – guest271314 Aug 20 '15 at 03:31
Sorry, I'm trying to actually simulate the event, because I'm trying to simulate `DOM_VK_UP` rather than an ascii character. I'm effectively trying to mimic a user pushing a key, rather than manually appending the key to the div. I originally used `a` in the question because I hoped it would be more clear. – merlin2011 Aug 20 '15 at 03:32
@merlin2011 _"trying to actually simulate the event, because I'm trying to simulate DOM_VK_UP rather than an ascii character. I'm effectively trying to mimic a user pushing a key, rather than manually appending the key to the div."_ Is requirement to trigger a custom event ? Still not certain about expected result ? – guest271314 Aug 20 '15 at 03:36
I updated the question. Please let me know if it's still not clear. I am trying to move the cursor up, to simulate what happens when the user pushes `Up` on the keyboard. – merlin2011 Aug 20 '15 at 03:42
@merlin2011 See http://stackoverflow.com/questions/10778291/move-the-cursor-position-with-javascript – guest271314 Aug 20 '15 at 04:02
That looks helpful for cursor movement specifically, but doesn't address the main question of whether it's possible to simulate a KeyboardEvent *exactly as if a user typed it.* – merlin2011 Aug 20 '15 at 04:05

How can I trigger a KeyboardEvent (DOM_VK_UP) that is actually handled by the browser, exactly as if the user typed the key?

1 Answers1