如何讓onclick在點擊其他東西后消失

Question

我只是在我的新網站空間上工作，我遇到了一個小問題。 我知道有輸入變量與一個onclick功能

<script> 
function mark(el) { 
    el.style.borderBottom= "3px solid white"; 
    } 
</script> 

當我點擊第一個輸入出現的邊界，因爲我想，但是當我點擊另一個輸入第一輸入標籤的邊界仍然存在。 那麼，怎樣才能讓我的功能，只有當被點擊另一個輸入以及

感謝你在期待

Answer 1

只要使用CSS的:focus僞類：

input:focus { 
 
    border-bottom:3px solid red; 
 
}

<input type="text"> 
 
<input type="text">

MDN Docs

Answer 2

這裏是我會做什麼時，它僅在輸入標籤本身，而不是點擊運行。首先，創建一個標記和一個取消標記的功能。然後在「onmousedown」觸發標記功能，在「onmouseup」事件中取消標記。因此，只有當您按下鼠標按鈕時纔會顯示此邊框。

<script> 
function mark(el) { 
    el.style.borderBottom= "3px solid white"; 
    } 

function unmark(el) { 
    el.style.borderBottom= "none"; 
    } 
</script> 

Answer 3

在添加樣式這個特定的元素，你可以刪除所有輸入或類似這樣的東西的風格：

function mark(el) { 
    var input = document.getElementsByTagName("input"); 
    for(var i =0;input.length>i;i++){ 
     input[i].removeAttribute("style"); 
    } 
    el.style.borderBottom= "3px solid white"; 
} 

Answer 4

您可以輕鬆使用CSS Focus選擇器。 input:focus

input:focus { 
 
    background-color: yellow; 
 
\t border-bottom:3px solid white; 
 
}

<div><input type="text"></div> 
 
<br/> 
 
<div><input type="text"></div>