為什么復制十六進制值后按空格鍵顏色不改變？

Question

一旦我單擊生成新顏色，就會生成一種新顏色。 單擊后，我還可以按空格鍵生成新的 colors。 但是，一旦我單擊“復制十六進制值”，空格鍵就不再按應有的方式起作用。 有沒有什么辦法解決這一問題？ 我假設我需要將按鍵移動到其他地方？

<!DOCTYPE html>
<html>
<head>
<title>
    Color Generator 
</title>
<style>
body {
        margin: 0;
        padding: 0;
        background: #161818;
        font-family: "Consolas";
    }
    .color {
        margin-top: 300px;
        text-align: center;
    }
    #hex {
        display: block;
        color: white;
        font-size: 100px;
        text-transform: uppercase;
        margin: 0px;
    }
    .color button {
        background: none;
        outline: 10px;
        color: white;
        cursor: pointer;
        font-size: 20px;
        border: 3px solid white;
    }

    .notification {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -100%);
        transition: transform 0.6s ease;
        border: 2px solid white;
        padding: 12px 30px;
        color: white;
    }
</style>
</head>
<body>

 <div class="color">
            <span id="hex">#??????</span>
            <button onclick="genNewColor()">Generate new random color</button>
            <button onclick="copyHexValue()">Copy hex value</button>
        </div>

        <div class='notification'>

        </div>


<script type="text/javascript">
    function genNewColor() {
        var symbols, color;
        symbols = "0123456789ABCDEF";

        color = "#";
        for (var i = 0; i < 6; i++) {
            color = color + symbols[Math.floor(Math.random() * 16)];
        }
        document.body.style.background = color;
        document.getElementById("hex").innerHTML = color;
    }

    function copyHexValue() {
        var copyHex = document.createElement("input");
        copyHex.value = document.getElementById("hex").innerHTML;
        document.body.appendChild(copyHex);
        copyHex.select();
        document.execCommand("copy");
        // alert("Copied the hex value " + copyHex.value);
        showNotification(copyHex.value);

        console.log("Copied the hex value " + copyHex.value);
        document.body.removeChild(copyHex);
    }

    document.body.onkeyup = function (e) {
        if (e.keyCode == 32) {
        }
    };

    const notification = document.querySelector(".notification");

    function showNotification(color) {
        let notificationText;
      // If no color has been picked 
        if (color === "#??????") notificationText = "Generate a color first";
      // Show Color Picked Message
        else notificationText = `Copied hex value ${color}`;
      //Slide down the notification
        notification.style.transform = "translate(-50%,100%)";
      // Add message to notification
        notification.textContent = notificationText;

    //Make Notification slide back up after 2s
        setTimeout(function hideNotification() {
            notification.style.transform = "translate(-50%,-100%)";
        }, 2000);
    }


    
</script>
</body>
</html>

Answer 1

嘿，當您單擊“ Generate new Random color ”時，您的焦點會落在此按鈕上，這就是為什么通過單擊空格鍵您只需單擊焦點按鈕，當您單擊另一個按鈕時焦點會發生變化。

您可以修復它，但將 function 調用添加到您的空間新聞事件

  document.body.onkeyup = function (e) {
    if (e.keyCode == 32) {
      genNewColor()
    }
  };

讓我知道它是否有幫助。

為什么復制十六進制值后按空格鍵顏色不改變？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-06-24 19:13:48

為什么復制十六進制值后按空格鍵顏色不改變？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-06-24 19:13:48

解決方案1
0 已采納 2020-06-24 19:13:48