Question

我在学校里做了一个作业，进行键盘布局，然后在按下键时更改其颜色。这意味着我需要使用.keydown .keyup eventListener等。

我只需要一个示例代码来帮助我入门。.我提供了一些代码，以便您了解我要完成的工作。

<!DOCTYPE html>

<div class="keyboard" id="keys">

    <div class="section-a">

        <div class="key tab" id="Tab">

            &#x21e5;

        </div>

        <!-- end of special keys pt.1 -->

        <!-- letter row pt.1 -->

        <div class="key letter" id="KeyQ">
            Q
        </div>

        <div class="key letter" id="KeyW">
            W
        </div>

        <div class="key letter" id="KeyE">
            E
        </div>

        <div class="key letter" id="KeyR">
            R
        </div>

        <div class="key letter" id="KeyT">
            T
        </div>

        <div class="key letter" id="KeyY">
            Y
        </div>

        <div class="key letter" id="KeyU">
            U
        </div>

        <div class="key letter" id="KeyI">
            I
        </div>

        <div class="key letter" id="KeyO">
            O
        </div>

        <div class="key letter" id="KeyP">
            P
        </div>

        <div class="key letter" id="BracketLeft">
            Å
        </div>

        <!--  end of letter row pt.1 -->

        <!-- special keys pt.2 -->

        <div class="key dual" id="BracketRight">
            ^
            <br> ¨
        </div>

    <div class="key enter upper" id="Enter">
        &#8617;
    </div>

    <div class="key caps" id="CapsLock">
        &#8682
    </div>

    <!-- end of special keys pt.2-->

Answer 1

我没有搜索特殊键，但这是一个简单的示例，说明如何在按下字母时更改字母的颜色。不是最好的解决方案，但是从这里您可以尝试更多。

var colorMap = {
    'q' : 'blue',
    'w' : 'red',
    'e' : 'yellow'
};

var letterPressed= "";

$(document).on('keyup', function(e){
     var letterMap = String.fromCharCode(e.which).toLowerCase();
     var letter = document.getElementById("Key" + letterPressed.toUpperCase() );
     letter.style.color = colorMap[letterMap];
});

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    letterPressed = String.fromCharCode(charCode);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="keyboard" id="keys">
  <div class="section-a">

      <div class="key letter" id="KeyQ"> Q </div>
      <div class="key letter" id="KeyW"> W  </div>
      <div class="key letter" id="KeyE"> E  </div>

      </div>
</div>

键盘布局的JS颜色更改

1 个答案: