.klaviatura{
width: 704px;
margin: 0 auto;
}
.klaviatura .row{
width: 100%;
height: 40px;
margin-bottom: 10px;
clear: both;
}
.klaviatura .key{
width: 40px;
height: 40px;
float: left;
cursor: pointer;
color: #fff;
margin-left: 6px;
text-align: center;
line-height: 40px;
background: linear-gradient(to top, #fce25b, #ecc92b);
box-shadow:
-1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7),
-2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6),
-3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5),
-4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4),
-5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3),
-6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2);
}
.klaviatura .key:hover{
background: #f9de53;
}
.klaviatura .backspace,.klaviatura .shift,.klaviatura .capslock{
width: 100px;
}
.klaviatura .capslock,.klaviatura .shift{
color: #4e2f2f;
}
.klaviatura .tab{
width: 80px;
}
.klaviatura .space{
width: 300px;
margin-left: 206px;
}
.klaviatura sup{
margin: -10px 0 0 -24px;
font-size: 12px;
position: absolute;
}
#result{
width: 680px;
height: 80px;
margin: 0 auto;
display: block;
padding: 10px;
font-size: 18px;
color: #444;
margin-bottom: 10px;
}
$(document).ready(function(){
var capslock = false;
var shift = false;
var key;
$(‘.klaviatura .key’).click(function(){
key = $(this).find(‘span’).text();
//Если специальная функция
if( key == ‘Backspace’ || key == ‘Tab’ || key == ‘Caps Lock’ || key == ‘Shift’ || key == » ){
if( key == ‘Backspace’ ){
$(‘#result’).val( $(‘#result’).val().substr(0, $(‘#result’).val().length — 1) ).focus();
}
if( key == ‘Tab’ ){
$(‘#result’).val( $(‘#result’).val() + ‘ ‘ ).focus();
}
if( key == ‘Caps Lock’ ){
if(capslock){
$(‘.capslock’).css(‘color’,’#929292′);
capslock = false;
}else{
$(‘.capslock’).css(‘color’,’#ffffff’);
capslock = true;
}
}
if( key == ‘Shift’ ){
if(shift){
$(‘.shift’).css(‘color’,’#929292′);
shift = false;
}else{
$(‘.shift’).css(‘color’,’#ffffff’);
shift = true;
}
}
if( key == » ){
$(‘#result’).val( $(‘#result’).val() + ‘ ‘ ).focus();
}
}else{
if(capslock) key = key.toUpperCase();
if(shift) key = $(this).find(‘sup’).text();
$(‘#result’).val( $(‘#result’).val() + key ).focus();
}
});
}); Corey Peters Jersey