点击其他东西后如何让onclick消失

Question

我正在开发我的新网站空间，但遇到了一个小问题。我知道必须使用 onclick 函数输入标签

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

当我点击第一个输入时，边框显示为我想要的，但是当我点击另一个输入时，第一个输入标签的边框仍然存在。那么我怎样才能让该功能仅在仅单击输入标签本身时才起作用，而不是在单击另一个输入时起作用

感谢期待

Answer 1

这是我会做的。首先，创建一个标记和一个取消标记函数。然后在"onmousedown"触发标记功能，在"onmouseup"事件取消标记。因此，此边框只有在您按下鼠标按钮时才会显示。

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

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

Answer 2

就用CSS的:focus伪class:

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

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

MDN Docs

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 焦点选择器。 input:focus

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

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

点击其他东西后如何让onclick消失

How to let onclick disappear after clicking on something else

html

javascript

css

onclick