$(function(){
var keys = [];
var eles = [];
var $keys = $('#keys');
var $input = $('input').eq(0);
var keysText = $keys.text();
$keys.empty();
keys = keysText.split('')
.map((letter, idx) => `${letter}`);
keys.pop();
keys.push('xx');
console.log(keys);
var inputKey = function(v){
var vv = $input.val();
$input.val(vv+v);
}
var delKey = function(){
var vv = $input.val();
vv = vv.slice( 0, -1)
$input.val(vv);
}
var div = $('<div>');
keys.forEach(function(v){
if(v === "\n"){
div = $('<div>');
$keys.append(div);
} else if (v === 'xx'){
var span = $('<span>',{id: 'del'}).text('X');
div.append(span);
eles.push(span);
span.on('mousedown', function(){
$t = $(this);
$(this).addClass('click');
delKey(v);
setTimeout(function(){
$t.trigger('mouseup');
}, 39);
});
span.on('mouseup', function(){
$(this).removeClass('click');
});
} else {
var cc = 'c' + v.charCodeAt(0);
var span = $('<span>',{id: cc}).text(v);
div.append(span);
eles.push(span);
span.on('mousedown', function(){
$t = $(this);
$(this).addClass('click');
inputKey(v);
setTimeout(function(){
$t.trigger('mouseup');
}, 39)
setTimeout(function(){
$t.trigger('mouseup');
}, 999)
});
span.on('mouseup', function(){
$(this).removeClass('click');
});
span.on('mouseout', function(){
$(this).removeClass('click');
});
}
});
document.onkeypress = function(e) {
var v = e.charCode;
if (v) {
cc = v
v = String.fromCharCode(v);
console.log(v);
$('#c' + cc).trigger('mousedown');
}
}
});