Виртуальная клавиатура
Материал из Department of Theoretical and Applied Mechanics
Версия от 18:53, 8 марта 2015; Wikiadmin (обсуждение | вклад) (Замена текста — «<source lang="(.*)" first-line="(.*)">» на «<syntaxhighlight lang="$1" line start="$2" enclose="div">»)
Кафедра ТМ > Программирование > Интернет > JavaScript > Виртуальная клавиатура
Простейшая реализация виртуальной клавиатуры, со звуками нажатия клавиш и буфером всех введенных символов. В полноэкранном режиме буфер символов и интерфейс копирования скрываются. (Чтобы перейти в полноэкранный режим, нажмите F11).
Ширина клавиатуры подстраивается под размер экрана/браузера.
"Виртуальная клавиатура" (скрипт выложен отдельной страницей, т.к. предполагается использование в полноэкранном режиме).
Звук нажатия клавиши взят из репозитория Freesound.org
Скачать программу: Virtual_Keyboard.zip Текст программы на языке JavaScript (разработчик Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "Virtual_Keyboard.html" <syntaxhighlight lang="html" line start="1" enclose="div"> <!DOCTYPE html> <html> <head>
<meta charset="UTF-8" /> <title>Виртуальная клавиатура</title>
</head> <body>
<input id="text" style="width: 100%; font-family:monospace; font-weight:bold; " onkeypress="if (event.keyCode != 122 && event.keyCode != 116) return false;">
<input id="all_text" style="width: 100%; font-family:monospace; " onkeypress="if (event.keyCode != 122 && event.keyCode != 116) return false;">
<input type="button" id="select_all" onclick="all_text.focus(); all_text.setSelectionRange(0, all_text.value.length);" value="Выделить всё"/>
Выделите и нажмите Ctrl + C, чтобы скопировать в буфер обмена
<script>
document.oncontextmenu = function() {return false;}; // блокировка контекстного меню
var button_width, char_size; // ширина кнопки, размер шрифта
var buttons_buffer = ""; // буфер кнопок, который запоминает все введенные кнопки
var extra_string = ""; // сюда заносятся символы, не помещающиеся на экран
function count_sizes() { // считаем нужные размеры букв и кнопок
button_width = document.documentElement.clientWidth / 10 - 4;
char_size = button_width - 10;
}
count_sizes();
// создадим кнопки
var chars = "АБВГДЕЁ←\nЖЗИЙКЛМНО\nПРСТУФХЦЧ\nШЩЪЫЬЭЮЯ ";
for (var ch = 0; ch < chars.length; ch++) {
if (chars[ch] == '\n') container.innerHTML += "
";
else if (chars[ch] == '←') container.innerHTML += "<input type='button' id='b" + ch + "' onmousedown='press_button(\"" + chars[ch] + "\"); return false;' value='←'/>";
else if (chars[ch] == ' ') container.innerHTML += "<input type='button' id='b" + ch + "' onmousedown='press_button(\"" + chars[ch] + "\"); return false;' value='˽'/>";
else container.innerHTML += "<input type='button' id='b" + ch + "' onmousedown='press_button(\"" + chars[ch] + "\"); return false;' value='"+ chars[ch] + "'/>";
}
function press_button(c) {
if (c == '←') {
if (text.value.length != 0) { // не объединять с пред. условием, т.к. далее идет else
if (extra_string.length > 0) {
text.value = extra_string[extra_string.length - 1] + text.value.substring(0, text.value.length - 1);
extra_string = extra_string.substring(0, extra_string.length - 1);
} else {
text.value = text.value.substring(0, text.value.length - 1);
}
buttons_buffer += c;
}
} else {
if (text.value.length < 16) {
text.value += c;
} else {
extra_string = extra_string + text.value[0];
text.value = text.value.substring(1, text.value.length) + c;
}
buttons_buffer += c;
}
sound_click();
text.focus();
all_text.value = buttons_buffer;
}
function sound_click() { // звук при нажатии клавиши
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = 'button_sound.wav'; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
function resize() { // размеры кнопок в зависимости от размеров экрана
count_sizes();
text.style.fontSize = button_width + "px";
for (var ch = 0; ch < chars.length; ch++) {
var e = document.getElementById('b' + ch);
if (e != null) {
e.style.fontSize = char_size + "px";
if (chars[ch] == "←") e.style.width = button_width * 3 + "px";
else if (chars[ch] == " ") e.style.width = button_width * 2 + "px";
else e.style.width = button_width + "px";
}
}
}
function check_copy_GUI_visibility() { // если полноэкранный режим - убрать интерфейс копирования
if( (screen.availHeight || screen.height - 5) <= window.innerHeight) {
copy_GUI.style.display = "none";
copy_GUI.style.visibility = "hidden";
} else {
copy_GUI.style.display = "inline";
copy_GUI.style.visibility = "visible";
}
}
resize();
check_copy_GUI_visibility();
window.onresize = function() {resize(); check_copy_GUI_visibility();};
</script>
</body> </html> </source> </toggledisplay>
