Question

我正在制作一个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>

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

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

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>

Answer 1

我想要的是在键盘事件中管理active类而不是状态。因此，为active类添加CSS规则：

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

然后在onkeydown和onkeyup个事件中添加和删除此课程。

JSFiddle上的示例。

Answer 2

element.classList.add（ “myStyle的”）; ？（使用.mystyle {color：orange;}）

在你的connection.send（）

之前

我不知道它是否有效

Answer 3

关于CSS代码：

@Vaidas如何添加 - ＆gt; i.active在i旁边：活跃。

JS CODE：

我只是实施左箭头。

 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)
       }
    });
    }

Answer 4

试试这个

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

4 个答案: