Віртуальна клавіатура, як зробити підсвічування кнопок і відміну?

Ласкаво просимо!

Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.

Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.

Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.

Сторінки 1

Для відправлення відповіді ви повинні увійти або зареєструватися

1 Тема від Nadeg 26.07.2023 09:45:55

Nadeg
Новий користувач
Поза форумом

Дата реєстрації: 07.04.2023
Повідомлень: 5

Репутація

: 0

Тема: Віртуальна клавіатура, як зробити підсвічування кнопок і відміну?

У мене завдання зробити віртуальну клавіатуру з підсвіткою клавіш при натисканні і зникненням її. Поле ввода, зрозуміло, добре працює просто textarea, підсвітку для keydown я зробила за допомогою switch. Правда, це було досить багато коду. Як краще зробити відміну цієї підсвітки, тобто, backgroundColor? Є варіанти на keyup і також setTimeOut, який підійде краще? І не зовсім розумію, як вставити таймер у функцію, вона в мене анонімна. Чи можна задати відміну і саму підсвітку на всі клавіші одразу, щоб вони вмикалися за натисканням?

2 Відповідь від koala 26.07.2023 10:03:15 Востаннє редагувалося koala (26.07.2023 10:48:56)

koala
Лінива тваринка
Поза форумом

Дата реєстрації: 01.05.2013
Повідомлень: 15 617

Репутація

: 13330

Re: Віртуальна клавіатура, як зробити підсвічування кнопок і відміну?

Як я розумію, 95% (мінімум) тут має бути на CSS. На js лише onkeyup/onkeydown.
Показуйте код.

Подякували: leofun011

koala вебсайт

3 Відповідь від Nadeg 26.07.2023 19:08:54

Nadeg
Новий користувач
Поза форумом

Дата реєстрації: 07.04.2023
Повідомлень: 5

Репутація

: 0

Re: Віртуальна клавіатура, як зробити підсвічування кнопок і відміну?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    font: 71%/1.5 Verdana, Sans-Serif;
    background: #eee;
    }
    #container {
    margin: 10px auto;
    width: 688px;
    }
    #write {
    margin: 0 0 5px;
    padding: 5px;
    width: 671px;
    height: 120px;
    font: 1em/1.5 Verdana, Sans-Serif;
    background: #fff;
    border: 1px solid #f9f9f9;
  border-radius: 5px;
    
    }
    #keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    }
         #keyboard button  {
        float: left;
        margin: 0 5px 5px 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #fff;
        border: 1px solid #f9f9f9;
        border-radius: 5px;
        
        }
            .capslock, .tab, .left-shift {
            clear: left;
            }
                #keyboard .tab, #keyboard .back {
                width: 70px;
                }
                #keyboard .capslock {
                width: 80px;
                }
                #keyboard .return {
                width: 77px;
                }
                #keyboard .left-shift {
                width: 95px;
                }
                #keyboard .right-shift {
                width: 109px;
                }
            .lastitem {
            margin-right: 0;
            }
            .uppercase {
            text-transform: uppercase;
            }
            #keyboard .space {
            clear: left;
            width: 681px;
            }
            .on {
            display: none;
            }
            #keyboard button:active {
            position: relative;
            top: 1px;
            left: 1px;
            border-color: #e5e5e5;
            cursor: pointer;
            background-color: rgb(223, 115, 15);
            }
           
          
       
          .active {
            background-color: orange;
          }

<body>
  <div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <div id="keyboard">
        <button data-key="sp"class="symbol"><span class="off">`</span><span class="on">~</span></button>
        <button data-key="one"class="one symbol"><span class="off">1</span><span class="on">!</span></button>
        <button data-key="two"class="two symbol"><span class="off">2</span><span class="on">@</span></button>
        <button data-key="three"class="three symbol"><span class="off">3</span><span class="on">#</span></button>
        <button data-key="four"class="four symbol"><span class="off">4</span><span class="on">$</span></button>
        <button data-key="five"class="five symbol"><span class="off">5</span><span class="on">%</span></button>
        <button data-key="six"class="six symbol"><span class="off">6</span><span class="on">^</span></button>
        <button data-key="seven"class="seven symbol"><span class="off">7</span><span class="on">&amp;</span></button>
        <button data-key="eight"class="eight symbol"><span class="off">8</span><span class="on">*</span></button>
        <button data-key="nine"class="nine symbol"><span class="off">9</span><span class="on">(</span></button>
        <button data-key="zero"class="zero symbol"><span class="off">0</span><span class="on">)</span></button>
        <button data-key="tr"class="symbol"><span class="off">-</span><span class="on">_</span></button>
        <button data-key="equal"class="symbol"><span class="off">=</span><span class="on">+</span></button>
        <button data-key="back"class="back lastitem">Backspace</button>
        <button data-key="tab"class="tab">tab</button>
        <button data-key="q" class="q letter" >q</button>
        <button data-key="w" class="w letter" >w</button>