Javascript:onkeyup 与 onsubmit 相处不来

Question

我有 2 个函数附加到表单中的听众。一个onsubmit附加到 <form>和一个 onkeyup附加到 <input>在表格内。

表单没有搜索按钮，用户必须按回车键才能提交表单。问题是按下回车键会在 onsubmit 之后触发 onkeyup。

onkeyup 函数显示一条消息“按回车键搜索”，然后 onsubmit 应该用加载栏替换该文本，直到 AJAX 返回结果。脚本没有显示我的加载栏，而是显示文本“按 Enter 进行搜索”。

这里是一个简化...

<script>
    function doThings(){
        document.getElementById('results').innerHTML = "<img src='loading.gif' />";
        //Ajax Stuff
        return false;
    }
    function checkThings(){
        var someCondition = true;
        if(someCondition){
            document.getElementById('results').innerHTML = "Press ENTER to search.";
        }
    }
</script>
<form onsubmit="return doThings()">
    <input type="text" id="q" onkeyup="checkThings();" />
</form>
<div id="results"></div>

如何确保 onsubmit 函数在 onkeyup 函数之后执行，否则会阻止 onkeyup 函数在按下 ENTER 键时执行？

Answer 1

简单的解决方法是在 setTimeout 调用中包装显示加载栏以在下一个事件循环中执行它:

setTimeout(function() {
  document.getElementById('results').innerHTML = "<img src='loading.gif' />"
}, 0);

编辑:另一种方法，如果您实际上想要阻止 onkeyup 函数在按下 ENTER 键时执行，则检查事件处理程序中的键码。 “回车”键码为13:

<input type="text" id="q" onkeyup="if (event.keyCode !== 13) checkThings();" />