Question

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

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

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

基本示例：

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

Answer 1

首先获取对象的引用，例如更改HTML：

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

使用一些CSS，我们默认隐藏提交：

#submit{
    display:none;
}

我们添加了Id，现在我们添加了事件监听器以专注于输入..

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

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

你需要做更多的工作..

https://jsfiddle.net/7uzkzr67/

Answer 2

您可以使用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>

<强> Javscript

function setVisible(state) {
    document.getElementById("submit").style.visibility = state;
}

以下是有效的演示： https://jsfiddle.net/qbotxpL6/

希望这有帮助！

Answer 3

这是纯CSS解决方案;

.showonfocus{
  display:none;
}
.inputfield:focus + .showonfocus{
  display:inline;
}

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

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

3 个答案: