如何隐藏表单提交按钮，除非输入焦点（香草JS）

-1

我有一个表单，我想隐藏提交按钮，除非输入被聚焦/选择。如何隐藏表单提交按钮，除非输入焦点（香草JS）

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

我需要这样做使用纯JS（或者CSS /萨斯），不的jQuery等

基本例如：

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

来源

2017-05-25 Matt

你尝试过什么？ – Pogrindis

我只试过用CSS做。我会知道如何用jQuery做到这一点，但不知道这个项目需要的纯JS。 – Matt

....为什么不能找出香草JS的作用？ jQuery使用香草JS .. – Pogrindis

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

来源

2017-05-25 12:33:42 Bhuwan

谢谢，这是我用过的 - 我不确定这种事情是否可能！ – Matt

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

希望这有助于！

来源

2017-05-25 12:23:38

你的更漂亮 – Pogrindis

我不是OP ..为什么这是downvoted？ – Pogrindis

是的..这就是我想知道.. ** Downvoter ..请陈述理由** –

首先得到引用你的对象，所以改变例如HTML：

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

有了一些CSS，我们将隐藏在默认情况下提交：

#submit{ 
    display:none; 
}

我们已经添加标识的，现在我们添加事件侦听器，以便专注于输入..

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

第二个参数添加到eventListener中当事件被触发执行..

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

https://jsfiddle.net/7uzkzr67/

来源

2017-05-25 12:24:00 Pogrindis

感谢您的答案。使用下面的CSS解决方案，但感谢您的帮助！ – Matt

如何隐藏表单提交按钮，除非输入焦点（香草JS）

回答

相关问题