На вопрос меня толкнул этот вопрос и так как не оказано должное внимание я решил это реализовать..Но что то не получилось
var elem = document.getElementById("elem");
elem.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
elem.style.top = "30px"
} else if (e.keyCode == '40') {
elem.style.bottom = "-30px"
} else if (e.keyCode == '37') {
elem.style.left = "-30px"
} else if (e.keyCode == '39') {
elem.style.right = "-30px"
}
}
#elem {
padding: 20px;
background: red;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="elem"></div>
Что я делаю не так ? Где ошибка ?
Для определения кода кнопки пользовался этим сервисом: http://keycode.info/
Общую информацию брал от сюда : https://learn.javascript.ru/keyboard-events
div
по дефолту нет фокуса, соответственно и отслеживать нажатие кнопок для него невозможно, если по какой-то неведомой причине это все же хочется сделать, можно использовать атрибутtabindex="1"
, тогдаdiv
можно будет зафокусить и соответственно отследить событие. – MedvedevDev 23 июн '18 в 4:04elem.onkeydown
(гдеelem
-div
), то безtabindex
не обойтись.elem
должен быть чем-то, что имеет фокус (window
,document
,input
,textarea
, etc.) – MedvedevDev 23 июн '18 в 4:10focus
(получение фокуса),blur
(снятие фокуса), по другому никак (jsfiddle.net/xwq5g20r/57). Ситуация похожа наhover
событие, в теории можно было бы соединитьmouseenter
,mouseleave
и сделать одно событие (что собственно и сделали в jQuery, что кстати не особо то и удобно использовать), но в чистом js для каждого действия свое событие, а дальше делай с ними что хочешь. – MedvedevDev 23 июн '18 в 4:54