A Pen by uriuriuriu.

1押したらAlt-+-r押したことになるマシーン.markdown

1押したらAlt + r押したことになるマシーン

でもevent名がおかしいマシーン

A Pen by uriuriuriu on CodePen.

License.

index.html

<h1>1押したら<br>Alt + r押したことになるマシーン</h1>
<div id="comment"></div>
<div id="log"></div>

script.js

document.onkeydown = function(e){
  var keyEvent = e || window.event;
  console.log("----");
  console.log(e);
  $("#log").text(keyEvent.toString());
  if(keyEvent.keyCode == 49){ // 1が押されたら
    $("#comment").prepend("<div>1押されたわ〜</div>");
    // Alt + r 押したことにする
    
    // a. KeyboardEventで素直に作る。→だめだった！！！！
    // http://jsdo.it/hogeTaro225/teP6
//    var e = document.createEvent('KeyboardEvent');
//    e.initKeyboardEvent("onkeydown", true, true, window, true, false, false, true, 0, 82);
//    document.dispatchEvent(e);

    
    // b. Eventで作成してKeyboardEventに差し替え
    // https://groups.google.com/forum/#!msg/chrome-api-developers-jp/nZgW_c61dvs/MnPSmsVvOuAJ
    var e = document.createEvent('Event');
    var o = {
      type:'keydown',
      canBubble: true,
      cancelable: true
    };
    var ko = {
      view: window,
      detail: 0,
      keyIdentifier: 'U+0052',
      keyLocation: 0,
      ctrlKey: false,
      shiftKey: false,
      altKey: true,
      metaKey: false,
      altGraphKey: false,
      keyCode: 82,
      charCode: 82,
      which: 82,
      layerX: 0,
      layerY: 0,
      pageX: 0,
      pageY: 0
    };
    e.initEvent(o.type, o.canBubble, o.cancelable);
    Object.keys(ko).forEach(function(k) {
      e[k] = ko[k];
    });
    e.__proto__ = document.createEvent('KeyboardEvent').__proto__;
    document.dispatchEvent(e);
        
  }else if(keyEvent.keyCode == 82 && keyEvent.altKey == true){
    // Alt + r 押された？
    $("#comment").prepend("<div>alt + r押されたよー!!!</div>");
  }else{
    $("#comment").prepend("<div>1でもalt + rでもないわ〜。keyCode "+ keyEvent.keyCode +"だわ〜</div>");
  }
}

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Merriweather:900);

body{
  padding:30px;
  background-color:#E6E2D6;
  text-align:center;
  color:#333;
  font-family: 'Merriweather', serif;
}
h1{
  font-size:60px;
  padding-bottom:20px;
}
#comment{
  font-size:20px;
  line-height:1.3em;
  div{
    border-bottom:dotted 1px #c6c2b6;
  }
}


#log{
  position:fixed;
  right:0; bottom:0;
  padding-top:20px;
  background-color:#333;
  width:100%;
  height:40px;
  color:#E6E2D6;
}