HTML5 On-screen Keyboard
Improved version of http://jsfiddle.net/B1KMusic/GVqEA/
by velo_ninja
HTML
<canvas id="keyboard_canvas">Really?</canvas>
<textarea id="display"></textarea>
CSS
#display{
width: 100%;
height: 300px;
border: 1px;
background: #eeeeff;
font: 18pt Verdana;
}
#keyboard_canvas{
border:1px solid
;
}
JavaScript
/* Functions */
function char_inserter(chr){
return function(){
display_chars.push(chr);
};
}
function char_remove(){
display_chars.pop();
}
function display_clear(){
display_chars = [];
}
function display_render(s){
var interval = 60 / 3;
display.value = s.join("");
display_counter = (++display_counter) % interval;
if(display_counter < interval / 2){
display.value += "_";
}
}
function init(chars){
var i, j, k, chr;
for(i = 0; i < chars.length; i++){
for(j = 0; j < chars[i].length; j++){
for(k = 0; k < chars[i][j].length; k++){
chr = chars[i][j][k];
if(chr != ' '){
keysets[i].push(new Key(k, j, 1, 1, chr, char_inserter(chr)));
}
}
}
}
var k_backspace = new Key(11, 0, 4, 1, "Backspace", char_remove ),
k_tab = new Key(12, 1, 3, 1, "Tab", char_inserter(" ") ),
k_enter = new Key(12, 2, 3, 1, "Enter", char_inserter('\n') ),
k_shiftup = new Key(12, 3, 3, 1, "Shift", set_shifter(1) ),
k_shiftdn = new Key(12, 3, 3, 1, "Shift", set_shifter(0) ),
k_space = new Key( 0, 4, 9, 1, "Space", char_inserter(' ') ),
k_turbo = new Key( 9, 4, 3, 1, "Turbo", turbo_toggle ),
k_clear = new Key(12, 4, 3, 1, "Clear", display_clear );
keysets[0].push(k_backspace, k_tab, k_enter, k_shiftup, k_space, k_turbo, k_clear);
keysets[1].push(k_backspace, k_tab, k_enter, k_shiftdn, k_space, k_turbo, k_clear);
}
function key_runner(key){
return function(){
var x = key.x * cell_size,
y = key.y * cell_size,
w = key.width * cell_size,
h = key.height * cell_size,
b = border_size;
ctx.fillStyle = "#ffffff";
ctx.fillRect(x, y, w, h);
ctx.beginPath();
ctx.rect(x + b,...