Bymas | Экранная клава

Всем ку! Можно ли тут(https://cp.beget.ru) как-то слить экранную клаву? Как там: и Shift и пробел и т.д. Имеется вот такой гкод:

  
 <html> 
 <head> 
 <script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script> 
 <script>$(function () { 
         $('#keyboard button').each(function(){ 
             $(this).click(function(event) { 
                 $('#field').val($('#field').val() + event.target.innerHTML); 
                 $('#field').focus();});}); }); 
 </script> 
 </head> 
 <body> 
   
 <input id="field" class="pass" type="text" name="appCode" maxlenght="30" /> 
 <div id="keyboard" > 
 <button>1</button><button>2</button><button>3</button><button>                        </button> 
 </div> 
 var field = document.getElementById('field'); 
 document.getElementById('keyboard').onclick = function(evt){ 
      var but = evt.target.className  == 'but'? evt.target.innerHTML : false; 
      if(but) field.value = field.value + but; 
 }; 
 </body> 
 </html>

________
посл. ред. 03.09.2015 в 20:10; всего 1 раз(а); by PSYh

По исходному коду пробовал, нажимаю, закрывает окно :(

PSYh (03.09.2015 в 20:09)
По исходному коду пробовал, нажимаю, закрывает окно :(

Выруби js и копируй

Kaito (03.09.2015 в 20:22)
PSYh (03.09.2015 в 20:09)
По исходному коду пробовал, нажимаю, закрывает окно :(

Выруби js и копируй

Спс :)

PSYh , хоть плюсег дай

Возникла еще одна проблемка... Что тут не так? Не открывает клаву:
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cp.beget.ru/js/etc/keyboard/jquery.keyboard.min.js"></script>
<script type="text/javascript" src="https://cp.beget.ru/js/global/ChangeUserListener.js"></script>

<link rel="stylesheet" href="/main.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cp.beget.ru/style/global/2_jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" type="text/css" href="https://cp.beget.ru/style/global/2_jquery-ui-1.8.20.custom.smooth.patch.css" />
<link rel="stylesheet" type="text/css" href="https://cp.beget.ru/style/keyboard/keyboard.css" />

<style>

.keyboard-input-container {
position: relative;
}

.keyboard-input-container > input {
padding-right: 22px;
}

.keyboard-input-container a.toggle-keyboard {
display: block;
height: 22px;
position: absolute;
right: 5px;
top: 1px;
width: 22px;
}
</style>

<script>
$(function() {
change_user_listener.trigger(0);
$("#login").focus();

var last_login = null;
$("#login").on("focusout", function() {
var val = $(this).val();

if(val.length > 3 && val != last_login) {
last_login = val;
jQuery.post("?generate_cache", {
login: val
}); //
}
});

if(getDocHeight() < 410) {
$(".footer").hide();
}

// keyboard

$(".keyboard-input-container input").keyboard({
usePreview : true,
openOn : '',
autoAccept : true,
display : {
'a' : '\u2714:Accept (Shift-Enter)',
'accept' : 'Применить:Применить (Shift-Enter)',
'alt' : 'AltGr:Alternate Graphemes',
'b' : '\u2190:Backspace',
'bksp' : 'Bksp:Backspace',
'c' : '\u2716:Cancel (Esc)',
'cancel' : 'Отменить:Отменить (Esc)',
'clear' : 'C:Clear',
'combo' : '\u00f6:Toggle Combo Keys',
'dec' : '.:Decimal',
'e' : '\u21b5:Enter',
'enter' : 'Enter:Enter',
'left' : '\u2190',
'lock' : '\u21ea Lock:Caps Lock',
'next' : 'Next',
'prev' : 'Prev',
'right' : '\u2192',
's' : '\u21e7:Shift',
'shift' : 'Shift:Shift',
'sign' : '\u00b1:Change Sign',
'space' : ' :Space',
't' : '\u21e5:Tab',
'tab' : '\u21e5 Tab:Tab'
}
});

$(".keyboard-input-container .toggle-keyboard").on("click", function(e) {
e.preventDefault();

$(this).siblings("input").getkeyboard().reveal()
});

$('#resend').attr('disabled', true);

setTimeout(function(){
$('#resend').attr('disabled', false).on( 'click', function() {
$('#key').val();
$('#enter').click();
})
}, 10000);
});

function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}

</script>
</head>
<script type="text/javascript">
$(function() {

var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};

if (isMobile.any()) {
$('div.footer').hide();
}
});
</script>
</di