Javascript 如何隐藏表单提交按钮，除非输入被聚焦（vanilla JS）

我有一个表单，我想隐藏提交按钮，除非输入被聚焦/选中

除了提交之外，只有一个输入

我需要使用纯JS（或者CSS/Sass），而不是jQuery等

基本示例：

<form>
    <input type="text" placeholder="Example field">
    <input type="submit value="Submit">
</form>

您可以使用
onblur
和
onfocus
事件来操作html元素。你可以试一下

HTML

<form>
    <input type="text" placeholder="Example field" onblur="setVisible('hidden');" onfocus="setVisible('visible');">
    <input id="submit" type="submit" value="Submit" style="visibility:hidden">
</form>

以下是工作演示：

希望这有帮助
 首先获取对象的引用，因此更改HTML，例如：

<form>
    <input id="input_1" type="text" placeholder="Example field">
    <input id="submit" type="submit" value="Submit" />
</form>

我们已经添加了Id，现在我们添加了事件监听器以关注输入

document.getElementById("input_1").addEventListener('focus', function(){
    document.getElementById("submit").style.display = 'block';
}
, true);

触发事件时，将执行eventListener中的第二个参数

你需要在这方面做更多的工作

这里是纯CSS解决方案


.showonfocus{
显示：无；
}
.inputfield:focus+.showonfocus{
显示：内联；
}

我只尝试过使用CSS。我知道如何使用jQuery实现这一点，但不知道如何使用纯JS，这是这个项目所必需的。。。。。你为什么不知道香草JS是做什么的？jQuery使用vanilla JS..您的是Prettieries。。这就是我想知道的。。投票人。。请说明原因谢谢你的回答，我在下面使用了CSS解决方案，但谢谢你，这就是我使用的-我不确定这类事情是否可行！谢谢你的回答。使用了下面的CSS解决方案，但感谢您的帮助！
#submit{
    display:none;
}

document.getElementById("input_1").addEventListener('focus', function(){
    document.getElementById("submit").style.display = 'block';
}
, true);