除非输入被聚焦,否则如何隐藏表单提交按钮(vanilla JS)

时间:2017-05-25 12:15:23

标签: javascript

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

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

我需要使用纯JS(或者CSS / Sass),而不是 jQuery等。

基本示例:

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

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

您可以使用onbluronfocus事件来操纵您的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/

希望这有帮助!

答案 2 :(得分:0)

这是纯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>