onblur 与 onfocus 的bug问题

**想做一个类似必应的搜索框，点击空白处时搜索框的光标失去焦点联想词隐藏，
聚焦搜索框时联想词显示；这个功能实现了是实现了，但是有个小问题，
当我在搜索框聚焦后，点击联想词，联想词隐藏了，我获取不到。**

这是源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #Txt{
            width: 445px;
            height: 30px;
            border:none;
            text-indent: 1.2em;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
        }
        #btn{
            width: 48px;
            height: 30px;
            border:none;
            background: white;
        }
        ul{
            width: 500px;
            height: 300px;
            border:1px #ccc solid;
            display: none;
        }
        li{
            width: 480px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
            padding-left: 20px;
            list-style:none;
        }
        li:hover{
            background: rgb(245, 245, 245);
        }
        #bigBox{
            width: 500px;
            height: 500px;
            margin: 220px auto;
        }
        #bigBox #hh{
            border:1px rgb(203, 203, 203) solid;
        }
    </style>
</head>
<body>
    <div id="bigBox">
        <div>
            <div id="hh">
                <input type="text" id="Txt" />
                <input type="button" value="搜索" id="btn" />
            </div>
        </div>
        <ul id="box"></ul>

    </div>
</body>

</html>
<script>

var oTxt = document.getElementById("Txt");
var oUl = document.getElementById("box");
var oBtn = document.getElementById("btn");
var oHead = document.getElementsByTagName("head")[0];
oTxt.onkeyup = function(){
    oUl.style.display = "block";
    oUl.innerHTML = "";
    var str = oTxt.value;
    var sc = document.createElement("script");
    sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+str+"&cb=fn";

    oHead.appendChild(sc);
}
function fn(data){
    var arr = data.s;
    //console.log(arr);
    arr.forEach(function(value){
        var li = document.createElement("li");
        li.innerHTML = value;
        oUl.appendChild(li);
    })
}
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaaaaaa&cb=
oUl.onclick = function(e){
    oUl.value = "";
    var e = e || event;
    var el = e.target || e.srcElement;
    if(el.nodeName == "LI"){
        oTxt.value = el.innerHTML;
    }
    var url = "https://cn.bing.com/search?q=" + oTxt.value;
    window.open(url);
}
oBtn.onclick = function(){
    var url = "https://cn.bing.com/search?q=" + oTxt.value;
    location.href = url;
}

//出问题的地方在这里

oTxt.onfocus = function(){
    oUl.style.display = "block";
}
oTxt.onblur = function(){
    oUl.style.display = "none";
}

</script>

我的是这样的出不来

图片描述

想要的效果是下面这样
图片描述

求助各位~

javascript

阅读 3.4k

6 个回答

得票最新

萌新小白rai

14232841

发布于
2017-12-14

这是目前的做法，点击bigbox以外的区域隐藏oUl（提示词显示区域），点击bigBox显示oUl，在此期间阻止事件冒泡；

除此之外各位还能提供其他方法嘛

    oBtn.onclick = function(e){
        var url = "https://cn.bing.com/search?q=" + oTxt.value;
        location.href = url;
        stopPro(e);
    }
    oBigBox.onclick = function(e){
        oUl.style.display = "block";
        stopPro(e);
    }
    document.onclick = function(e){
        oUl.style.display = "none";
        stopPro(e);
    }
    function stopPro(e){
        var e = evt || event;
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }