Question

我希望得到一些帮助。我在下面设置了一个JSfiddle：

我想要点击输入框时出现的灰色div框（其中包含搜索选项），当我点击它外面的任何地方时，它会关闭。

我想不加载jquery，因此保留javascript中的所有内容。

任何帮助？

以下代码：

HTML

<div id = "searchHousing">
    <input type="text" name="value" id="fillIn"> 
</div>

CSS

.searchBox {

    position: absolute; 
    font-family:Arial;
    font-size: 10pt;
    color:black;
    height: 200px;
    width: 200px;
    padding-left: 3px;
    padding-top: 1px;
    border: 1px solid white;
    background-color: grey;

}

#fillIn {

    width: 200px;
    height: 28px;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 2px;

#searchHousing {

float: left;

}

使用Javascript：

var inputSearch = document.getElementById('fillIn');

inputSearch.onclick = function() {
    var searchBox = document.createElement("div"); 
    searchBox.className = "searchBox";
    document.getElementById('searchHousing').appendChild(searchBox);
};

谢谢，伊万

Answer 1

我建议不要在点击事件上创建新的'div'。当多次单击输入框时，这将导致多个“searchBox”div。不用说，它需要清理工作来删除重复的div。

相反，在HTML中创建searchBox div并切换它对javascript事件的可见性。

更新了JSFiddle：http://jsfiddle.net/y7mEY/109/

[

var inputSearch = document.getElementById('fillIn');

inputSearch.onclick = function() {
    document.getElementById('searchBox').style.display = 'block';
};
inputSearch.onblur = function() {
    document.getElementById('searchBox').style.display = 'none';
};

Answer 2

如果您想使用当前的方法，只需使用“onblur”事件在元素失去焦点时删除元素。

inputSearch.onblur = function() {
  document.getElementById('searchHousing').removeChild(document.getElementsByClassName("searchBox")[0]);
}

但正如CVG所提到的，现场创建/删除元素是一个相当糟糕的主意。

Answer 3

你将一直在创造div元素，这不是什么好事。你可能会切换显示属性。

只是为了确保，如果您希望searchBox保持打开状态，只有在您点击searchBox 和 fillin元素之外时才关闭，那么您只需按照点击事件进行操作即可切换如果您在外面点击，则显示。只要你没有输入输入，其他方法就会关闭它，如果你想在div中放置工具或其他东西，那么这将毫无用处。

document.addEventListener('click', function(e) {
    if(e.target.id != "searchBox" && e.target.id != "fillIn")
        document.getElementById("searchBox").style.display="none";
});

完整演示：JSFiddle

Answer 4

onBlur的问题与其他答案建议的是，每次单击其中的任何内容时，您将隐藏搜索选项div（因为输入字段将失去焦点）。这可能不是你想要的。相反，您可以为文档添加单击处理程序以隐藏搜索选项，然后为搜索外壳添加单击处理程序以防止事件传播（这会使文档单击处理程序隐藏选项）。

如果单击输入框，处理程序将显示选项
如果单击输入框或选项，则事件传播将停止
如果您单击输入框或选项旁边的文档中的任何位置，则隐藏选项

更新了JSFiddle

var inputSearch = document.getElementById('fillIn');
var searchHousing = document.getElementById('searchHousing')

inputSearch.onclick = function(event) {
  document.getElementById('searchBox').style.display = 'block';
};
searchHousing.onclick = function(event) {
  event.stopPropagation(); // won't be passed to document.onclick
};
document.onclick = function() {
  document.getElementById('searchBox').style.display = 'none';
};

使用javascript将div框添加到DOM（html正文）后关闭div框

HTML

CSS

使用Javascript：

4 个答案: