Question

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

标记是这样的：

        <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);

“模糊”事件永远不会触发。尝试使用IE进行“聚焦”，并且它在二十年中工作一次。不确定发生了什么，所以如果有人能够启发我，我会非常感激

Answer 1

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

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

Javascript：麻烦与模糊

1 个答案: