当按下任何键时如何执行一个（部分）功能，而当按下空格键时如何执行另一个功能？

Question

我尝试过很多不同的事情，但我被困住了。我正在构建一个用户可以编写内容（使用输入）的网站，它会在按下空格键时使用CSS动画键入和淡出时显示在下方。按Enter键将调用reset，输入将被清除。

正如您在下面所见，我已经使用onkeyup调用了一个函数，该函数会写入您在H1部分中键入的任何内容。现在，除非您输入任何内容，否则它会立即开始消失。按空格键后，我希望这个词开始消失。我该怎么做？

我试过这个：

document.getElementById("Hello")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode == 32) {
        document.getElementById("new").style.opacity = "0";
    }
});

我觉得它会起作用，但事实并非如此。我也尝试将if（event.keyCode == 32）部分放在我的第一个函数中，但它也没有工作。

HTML：

<form>
<input type="text" id="Hello" value="" autocomplete="off" autofocus onkeyup="myFunction(this.value)"/>
<input type="reset" id="Reset">
</form>

<h1 id="new"></h1>

使用Javascript：

    window.myFunction = function(input) {
   document.getElementById("new").innerHTML = input;
   document.getElementById("new").style.opacity = "0";

CSS：

#Reset {display: none;}
  h1 {font: bold 200% Consolas, Monaco, monospace;
    color: white;
    transition: opacity 6s linear;
    opacity: 1;
    width: 16.5em;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;}

感谢您提前阅读并感谢您的回答！