<!-- 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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |