使用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';
};