Question

这个网站非常有帮助，这是我第一次发帖提问。我被卡住了......我在html中有一个搜索表单，其中有一个onKeyUp事件，触发div显示结果。

<form id="searchform">
    <div>
        What are you looking for? <input tabindex="0" type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);"  />
        </div>
    <div id="suggestions"></div>
</form>

正文有一个onLoad（）事件，当输入失去焦点时，该事件会在输入框上显示模糊，从而关闭搜索结果。

function searchbox() {

var elem;
    elem = document.getElementById('inputString');

elem.blur(function(){

    document.getElementById('suggestions').style.display = 'none';

 });
}

我遇到的问题是它没有关闭模糊的div ...但是如果我使用jQuery并用$（“input”）替换elem var，它就可以了。我尝试了很多不同的东西，我得到了两个结果中的一个。 div不会消除模糊，这会使div中的链接处于活动状态并可单击。或者，模糊事件起作用并且div消失，但它在链接可以被点击并激活之前消失。

所以我的问题是，jilla的vanilla javascript是什么？我的理解是它将模糊事件分配给所有输入。

$("input")

我知道我可以使用它，它确实有效，但我正在努力学习，并试图了解jQuery的功能，而不仅仅是插入我在网上找到的内容。我希望我留下足够的信息以获得一点指导。

Answer 1

试试这个：

elem.onblur = function(){
    document.getElementById('suggestions').style.display = 'none';
};

jQuery的.blur是.on( "blur", handler )的快捷方式，blur是一个事件，因此您可以通过将属性分配给属性onblur来附加。

Answer 2

试试这个，它也支持IE，但IE9 +也支持addEventListener

function searchbox() {
   var elem = document.getElementById('inputString');
   if(window.addEventListener) {
     elem.addEventListener('blur', function(event) {
       document.getElementById('suggestions').style.display = 'none';
     }, false);
   } elseif(window.atatchEvent) {
     window.attachEvent("onblur", function(event) {
       document.getElementById('suggestions').style.display = 'none';
    });
   } else {
      alert("Your browser does not support events");
   }
}

jQuery有效，但我正在寻找普通的jilla javascript

2 个答案: