Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<meta charset="utf-8" />
<title>Fix them keys, por favor</title>
</head>
<body>
  <header>
    <h1>Keydown testing</h1>
    <hr>
  </header>
  <section id="buttonville">
    <h2>Trigger through generic Event object</h2>
    <ul id="buttons-generic">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <h2>Trigger through KeyboardEvent</h2>
    <ul id="buttons-keyboard">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <hr>
  </section>
  <section id="tracer">
    <ul class="logs"></ul>
  </section>
</body>
</html>
 
ul.logs {
  list-style:none;
}
ul.logs > li {
  background-color:#FFFFCC;
  padding:5px;
  border-bottom:solid 1px #CCC;
}
 
function __triggerKeyboardEvent(el, keyCode)
{
    var eventObj = document.createEventObject ?
        document.createEventObject() : document.createEvent("Events");
  
    if(eventObj.initEvent){
      eventObj.initEvent("keydown", true, true);
    }
  
    eventObj.keyCode = keyCode;
    eventObj.which = keyCode;
    
    el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj); 
  
} 
function traceEvent(e){
    $(".logs").prepend(jQuery("<li>").html(
      "Key = " + e.keyCode
    ).fadeIn());
    
    console.log(e);
}
function triggerKeyboardEvent(el, keyCode){
    var keyboardEvent = document.createEvent("KeyboardEvent");
    
    var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
  
  
    keyboardEvent[initMethod](
                       "keydown",
                        true,      // bubbles oOooOOo0
                        true,      // cancelable   
                        window,    // view
                        false,     // ctrlKeyArg
                        false,     // altKeyArg
                        false,     // shiftKeyArg
                        false,     // metaKeyArg
                        keyCode,  
                        0          // charCode   
    );
  
    el.dispatchEvent(keyboardEvent); 
}
$(document).ready(function(){
  
  document.addEventListener("keydown", function(e){
    traceEvent(e);
  });
  
  $("#buttons-generic").find("button").click(function(){
    __triggerKeyboardEvent(document.body, parseInt($(this).attr("data-key")));
  });
  $("#buttons-keyboard").find("button").click(function(){
    triggerKeyboardEvent(document.body, parseInt($(this).attr("data-key")));
  });
  
  /*
  setInterval(function(){
    __triggerKeyboardEvent(document.body, 13);
  }, 5000);
  */
}); 
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
callmephilippro
0viewers