Виртуальная клавиатура

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Кафедра ТМ > Программирование > Интернет > JavaScript > Виртуальная клавиатура

Простейшая реализация виртуальной клавиатуры, со звуками нажатия клавиш и буфером всех введенных символов. В полноэкранном режиме буфер символов и интерфейс копирования скрываются. (Чтобы перейти в полноэкранный режим, нажмите F11).

"Виртуальная клавиатура" (скрипт выложен отдельной страницей, т.к. предполагается использование в полноэкранном режиме).


Скрипт небольшой, поэтому написан прямо в html-файле.

Скачать программу: Virtual_Keyboard.zip Текст программы на языке JavaScript (разработчик Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "Virtual_Keyboard.html" 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Виртуальная клавиатура</title>
</head>
<body>
    <!--<условие onkeypress предотвращает нажатие любых кнопок, кроме F5 и F11>-->
    <input id="text" style="width: 100%; font-family:monospace; font-weight:bold; " onkeypress="if (event.keyCode != 122 && event.keyCode != 116) return false;">
    <div id="container"></div>
    <br><br>
    <div id="copy_GUI">
        <!--<Современные браузеры блокируют изменение буфера обмена напрямую из javascript кода>-->
        <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, чтобы скопировать в буфер обмена
    </div>

    <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 += "<br>";
            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>

</toggledisplay>

Источник — «http://tm.spbstu.ru/?title=Виртуальная_клавиатура&oldid=25368»