如何隱藏表單提交按鈕，除非輸入焦點（香草JS）

Question

我有一個表單，我想隱藏提交按鈕，除非輸入被聚焦/選擇。

除提交之外，只有一個輸入。

我需要這樣做使用純JS（或者CSS /薩斯），不的jQuery等

基本例如：

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

Answer 1

這裏是純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>

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

首先得到引用你的對象，所以改變例如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/