Клавиатура

ё~
1!
2@
3#
4$
5%
6^
7?
8*
9(
0)
_
=+
Backspace

Tab
й
ц
у
к
е
н
г
ш
щ
з
х
ъ
\

Caps Lock
ф
ы
в
а
п
р
о
л
д
ж
э

Shift
я
ч
с
м
и
т
ь
б
ю
.
,

.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