Question

我想在用户点击它时将内部阴影添加到搜索框中，因此我使用了这个简单的代码：

function shadow()
{
document.getElementById("search2").style.boxShadow="inset 0px 0px 12px 0px rgba(0,0,0,0.75)";
}

标记：

<input type="search" onClick="shadow()">

因此，当您单击搜索框时，“search2”div会获得内部阴影并且它可以正常工作。但是，当用户取消点击搜索框并点击其他地方时，我想知道如何反转（删除内部阴影）。

由于

Answer 1

您应该使用onfocus和onblur事件。

onfocus - 当用户在文本框中时触发
onblur - 当用户离开文本框时触发

在onblur事件中添加

document.getElementById("search2").style.boxShadow = "";

点击事件仅在用户点击元素时触发。

Answer 2

您可以使用CSS focus: pseudoselector完全不使用任何JavaScript。在CSS样式中，使用：

#search2:focus {
    box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.75);
}

这里的优势在于它的代码更少，即使在没有启用JavaScript的浏览器中也能正常工作。这是一个jsFiddle：http://jsfiddle.net/5g9an/

它不会更简单。好吧，无论如何，我无法想到一个更简单的方法。

Answer 3

使用blur事件：

<input type="search" onClick="shadow()" onBlur="removeShadow()">

function removeShadow(){
  document.getElementById("search2").style.boxShadow="none";
}

如何反转onClick事件？

3 个答案: