触发i：在HTML页面上进行keydown时激活

I'm making a HTML page to control a RC Car. I want to be able to activate the "i:active" in CSS when keyboard arrows are down. The arrows in HTML:

我正在制作一个HTML页面来控制RC Car。我希望能够在键盘箭头关闭时激活CSS中的“i:active”。 HTML中的箭头:

<i class="left" onmousedown="venstreFunc()" ></i>
<i class="up"  onmousedown="fremoverFunc()" ></i>
<i class="right" onmousedown="hoyreFunc()"  ></i>
<i class="down" onmousedown="bakoverFunc()" ></i>

I can drive the RC car with both mousedown and the keydown events in my JavaScript, but i want to be able to see the orange border when i push down the keyboard arrows

我可以在我的JavaScript中使用mousedown和keydown事件来驾驶RC汽车,但我希望能够在我按下键盘箭头时看到橙色边框

How can I implement the keyboard arrow events to give the same orange border on the arrows as when I click/hold down on them?

如何实现键盘箭头事件以在箭头上给出与我单击/按住它们时相同的橙色边框?

document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;

    if (e.keyCode == '38') {
       connection.send("1");
    }
    else if (e.keyCode == '40') {
        connection.send("4");
    }
    else if (e.keyCode == '37') {
       connection.send("2");
    }
    else if (e.keyCode == '39') {
       connection.send("3");
    }
}

i {
  border: 1px solid #000;
  border-width: 0 20px 20px 0;
  display: inline-block;
  padding: 24px;
  cursor:pointer;
  position: absolute;
  outline:none;
}

i:active {
	border-right: solid orange;
    border-bottom: solid orange;
    border-width: 0 13px 13px 0;
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
     margin: 50px 0  0 200px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin: 150px 0 0 300px;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
     margin: 240px 0 0 200px;
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin:150px 0 0 100px;
}

<i class="left" onmousedown="venstreFunc()" ></i>
<i class="up"  onmousedown="fremoverFunc()" ></i>
<i class="right" onmousedown="hoyreFunc()"  ></i>
<i class="down" onmousedown="bakoverFunc()" ></i>

4 个解决方案

#1

What I would sugest is to manage active class instead of state on keyboard events. So add CSS rule for active class:

我想要的是在键盘事件上管理活动类而不是状态。因此,为活动类添加CSS规则:

i:active,
i.active {
    border-right: solid orange;
    border-bottom: solid orange;
    border-width: 0 13px 13px 0;
}

And then add and remove this class on onkeydown and onkeyup events.

然后在onkeydown和onkeyup事件上添加和删除此类。

Example on JSFiddle.

关于JSFiddle的例子。

#2

element.classList.add("mystyle"); ? (with .mystyle{color:orange;})

element.classList.add( “myStyle的”); ? (使用.mystyle {color:orange;})

this before your connection.send()

在你的connection.send()之前

i don't know if it works

我不知道它是否有效

#3

ABOUT CSS CODE:

关于CSS代码:

how @Vaidas say's add -> i.active next to i:active.

如何@Vaidas说添加 - > i.active旁边的i:active。

JS CODE:

I just implement the left arrow.

我只是实现左箭头。

 document.addEventListener("keydown",function(event){
        paintArrow(event.key);
    });
    //
    var iElements = document.querySelectorAll('i');
    function paintArrow (keypressed) {
        [].forEach.call(iElements, function(iElement) {
        let className = iElement.className;
       if ( className === 'left' && keypressed === 'ArrowLeft' ) {
            iElement.className+= ' active';
          setTimeout(function(){iElement.className='left';},24)
       }
    });
    }

#4

Try this

<script>
    document.onkeydown = checkKey;
    function checkKey(e) {
        e = e || window.event;
        if (e.keyCode > 36 && e.keyCode < 41) {
            $('i').removeClass('active');
            if (e.keyCode == '38') {
                $('.up').addClass('active');
            }
            else if (e.keyCode == '40') {
                $('.down').addClass('active');
            }
            else if (e.keyCode == '37') {
                $('.left').addClass('active');
            }
            else if (e.keyCode == '39') {
                $('.right').addClass('active');
            }
        }            
    }
    </script>

<style>
        i.active {
            border-right: solid orange;
            border-bottom: solid orange;
            border-width: 0 13px 13px 0;
        }
</style>

#1