Skip to content

Instantly share code, notes, and snippets.

@hadleyrich

hadleyrich/keyboard.html

Created February 29, 2012 08:14
Show Gist options
  • Save hadleyrich/1939091 to your computer and use it in GitHub Desktop.
Save hadleyrich/1939091 to your computer and use it in GitHub Desktop.
Download ZIP
A basic Javascript keyboard I hacked together as a PoC a while back.
Raw
keyboard.html
<html>
<head>
<title>Keyboard</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var re = /^[a-zA-Z]$/;
var current_case = 'lower';
var upper_keys = {
'1': '!', '2': '@', '3': '#',
'4': '$', '5': '%', '6': '^',
'7': '&', '8': '*', '9': '(',
'0': ')', '-': '_', '=': '+',
'[': '{', ']': '}',
';': ':', '\'': '"',
',': '<', '.': '>', '/': '?',
};
var lower_keys = {
'!': '1', '@': '2', '#': '3',
'$': '4', '%': '5', '^': '6',
'&': '7', '*': '8', '(': '9',
')': '0', '_': '-', '+': '=',
'{': '[', '}': ']',
':': ';', '"': '\'',
'<': ',', '>': '.', '?': '/',
};
$(function() {
$('span.key').click(handle_keypress);
});
function handle_keypress() {
var key = $(this).text();
var text = $('#output').text();
if (key == 'Enter') {
return;
} else if (key == 'Backspace') {
$('#output').text(text.slice(0, -1));
} else if (key == 'Shift') {
if (current_case == 'lower') {
$('span.key').each(function() {
if ($(this).text().match(re)) {
$(this).text($(this).text().toUpperCase());
} else {
var nk = upper_keys[$(this).text()];
if (nk) {
$(this).text(nk);
}
}
});
current_case = 'upper';
$('.key-shift').addClass('active');
} else {
$('span.key').each(function() {
if ($(this).text().match(re)) {
$(this).text($(this).text().toLowerCase());
} else {
var nk = lower_keys[$(this).text()];
if (nk) {
$(this).text(nk);
}
}
});
current_case = 'lower';
$('.key-shift').removeClass('active');
}
} else {
$('#output').text(text + key);
}
}
</script>
<style type="text/css">
body {
font-family : Arial;
}
.key-row {
clear : both;
}
#row-1 {
margin-left : 20px;
}
#row-2 {
margin-left : 40px;
}
#row-3 {
margin-left : 60px;
}
#row-4 {
margin-left : 0px;
}
#row-5 {
margin-left : 180px;
}
.key {
font-size : 25px;
display : block;
float : left;
border : 2px solid #ddd;
margin : 5px;
padding : 5px;
width : 35px;
height : 30px;
text-align : center;
cursor : pointer;
}
.key-double {
font-size : 15px;
width : 78px;
padding : 10px 1px 0px 1px;
}
.key-space {
width : 400px;
}
.key:hover {
background : #ddd;
border : 2px solid #bbb;
}
.active {
background : #ddd;
border : 2px solid #bbb;
}
#output {
border : 2px solid #bbb;
font-size : 1.2em;
margin : 20px auto;
width : 400px;
height : 40px;
}
#keyboard {
margin : 20px auto;
width : 900px;
}
</style>
</head>
<body>
<div id="output"></div>
<div id="keyboard">
<div id="row-1" class="key-row">
<span class="key">1</span>
<span class="key">2</span>
<span class="key">3</span>
<span class="key">4</span>
<span class="key">5</span>
<span class="key">6</span>
<span class="key">7</span>
<span class="key">8</span>
<span class="key">9</span>
<span class="key">0</span>
<span class="key">-</span>
<span class="key">=</span>
<span class="key key-double">Backspace</span>
</div>
<div id="row-2" class="key-row">
<span class="key">q</span>
<span class="key">w</span>
<span class="key">e</span>
<span class="key">r</span>
<span class="key">t</span>
<span class="key">y</span>
<span class="key">u</span>
<span class="key">i</span>
<span class="key">o</span>
<span class="key">p</span>
<span class="key">[</span>
<span class="key">]</span>
</div>
<div id="row-3" class="key-row">
<span class="key">a</span>
<span class="key">s</span>
<span class="key">d</span>
<span class="key">f</span>
<span class="key">g</span>
<span class="key">h</span>
<span class="key">j</span>
<span class="key">k</span>
<span class="key">l</span>
<span class="key">;</span>
<span class="key">'</span>
<span class="key key-double" id="key-enter">Enter</span>
</div>
<div id="row-4" class="key-row">
<span class="key key-double key-shift">Shift</span>
<span class="key">z</span>
<span class="key">x</span>
<span class="key">c</span>
<span class="key">v</span>
<span class="key">b</span>
<span class="key">n</span>
<span class="key">m</span>
<span class="key">,</span>
<span class="key">.</span>
<span class="key">/</span>
<span class="key key-double key-shift">Shift</span>
</div>
<div id="row-5" class="key-row">
<span class="key key-space"> </span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment