我有一个表单,我想隐藏提交按钮,除非输入被聚焦/选择。
除了提交之外,只有一个输入。
我需要使用纯JS(或者CSS / Sass),而不是 jQuery等。
基本示例:
<form>
<input type="text" placeholder="Example field">
<input type="submit value="Submit">
</form>
答案 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中的第二个参数将被执行。
你需要做更多的工作..
答案 1 :(得分:0)
您可以使用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/
希望这有帮助!
答案 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>