Помогите улучшить код
Приветствую всех!
Давненько я тут не бывал. Итак, словесное описание задачи: есть условная схема клавиатуры, сделанная с помощью HTML. При нажатии на определенную клавишу должен меняться цвет рамки вокруг "клавиши" с синего на красный. Кусок разметки <div class="keyboard"> <div class="keyboardRow"><span class="key" id="q">Q<sub>Й</sub></span> <span class="key" id="w">W<sub>Ц</sub></span> <span class="key" id="e">E<sub>У</sub></span> </div></div> Говнокод на js, реализующий задачу в нулевом приближении function checkKeyPress(e) { var KeyID = e.charCode; switch (KeyID){ case 113: pkey = document.getElementById("q"); pkey.style.borderColor = "red"; break; case 119: pkey = document.getElementById("w"); pkey.style.borderColor = "red"; break; } Вопрос, как его улучшить и избавиться от развесистого кейса? Использовать объекты? :blink: |
Цитата:
id='key_code_<его_код>' Тогда можно сразу обратиться к элементу pkey = document.getElementById('key_code_113'); |
Цитата:
Тоесть как то так: document.querySelector('.keyboard').onkeypress = function(e) { var target = !e.target ? window.event.srcElement : e.target; if (target.className.indexOf('key') > -1) { target.style.borderColor = 'red'; } else { // some code } } |
Попробую так. Простота — это хорошо.
|
Немного не уловил идею.
Можно полный код :) |
Уже додумал. Вопрос снимается.
|
Цитата:
<div class="keyboard"> <div class="keyboardRow"> <span class="key" id="keycode_113">Q<sub>Й</sub></span> <span class="key" id="keycode_119">W<sub>Ц</sub></span> <span class="key" id="keycode_101">E<sub>У</sub></span> </div> </div> <script type='text/javascript'> document.onkeypress = function(e) { e = e || event; var keys = this.querySelectorAll('.key'), i = 0, keyCode = e.keyCode ? e.keyCode : e.charCode for ( ;i < keys.length; ++i ) { if (keys[i].id.indexOf(keyCode) > -1) { keys[i].style.border = '1px solid red'; break; } } } </script> |
Вот такой получился код
function checkKeyPress(e) { var KeyID = String.fromCharCode(e.charCode).toLowerCase(); document.getElementById(KeyID).style.backgroundColor = "red"; } document.onkeypress = checkKeyPress; function checkKeyReleased(e) { var KeyID = String.fromCharCode(e.keyCode).toLowerCase(); document.getElementById(KeyID).style.backgroundColor = "white"; } document.onkeyup = checkKeyReleased; Как его можно доработать так, чтобы обрабатывать хотя бы квадратные скобки и знаки препинания на английской раскладке? |
Спасибо. Завтра покручу.
А то я пошел другим путём ;) |
Скажите, а как возможно обработать onkeyup, чтобы при отпускании клавиши возвращался прежний ( или же заданный) цвет рамки/фона?
|
Часовой пояс GMT +3, время: 05:10. |