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

Question

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

http://jsfiddle.net/y7mEY/102/

我一直希望单击输入框时会出现灰色的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元素，这没有任何好处。 您可以按照切换display属性的方式进行操作。

只是要确保，如果您希望searchBox保持打开状态，并且仅当您在searchBox 和 fillin元素外部单击时才关闭，那么您可以仅跟随click事件，并且仅当在两个事件外部单击时才切换显示。 只要您不输入输入内容，其他方法就会将其关闭，如果您想在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';
};