Javascript: 模糊问题

Question

我试图让导航项在点击时变身为搜索栏，并在用户点击其他地方时 returns 变回其原始状态。变形进行得很好，但我认为 'blur' 是我触发变形返回的最佳选择，但它不起作用。

标记是这样的：

        <li class="navItem" id="search">Search</li>

和脚本：

function startSearch()
{
    if(!ifSearch)
    {

        var search = document.getElementById("search");
        var form = document.createElement("form");
        var textfield = document.createElement("input");
        var submit = document.createElement("input");

        search.innerHTML = "";

        form.setAttribute("action", "search.php");
        form.setAttribute("method", "get");

        textfield.setAttribute("type", "text");
        textfield.setAttribute("id", "searchfield");
        textfield.setAttribute("name", "searchItem");

        submit.setAttribute("type", "submit");
        submit.setAttribute("id", "subSearch");

        form.appendChild(textfield);
        form.appendChild(submit);

        search.appendChild(form);

        ifSearch = true;

        search.addEventListener("blur",function() {
                  search.innerHTML = '<a>Search</a>';
                  ifSearch = false;
              });

    }
}

var ifSearch = false;

document.getElementById("search").addEventListener("click", startSearch);

"blur" 事件永远不会触发。尝试 "focusout" 与 IE 和它工作一次二十次。不确定发生了什么，所以如果有人能启发我，我将不胜感激

Answer 1

焦点和模糊事件不会冒泡。在这种情况下，您需要直接在 <input> 字段上监听模糊事件。

演示：http://jsfiddle.net/pt38j1en/6/

Javascript: 模糊问题

Javascript: trouble with blur

html

javascript

blur