Question

我在表单中连接了两个函数甚至是侦听器。 onsubmit附加了<form>，表单中的onkeyup附加了<input>。

表单没有搜索按钮，用户必须按Enter键才能提交表单。问题是按下输入会在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>

如何确保在onkeyup功能之后执行onsubmit功能，否则当按下ENTER键时阻止执行onkeyup功能？

Answer 1

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

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

编辑：另一种方式，如果您实际上想要阻止按下ENTER键时执行onkeyup功能是检查事件处理程序中的keycode。 “输入”键代码为13：

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

Answer 2

可以阻止此执行的一种方法是在doThings()函数中设置一个布尔值，表明已进行Ajax调用。当返回Ajax调用时，您可以标记该布尔值。

var submitted = false; 
function doThings(){
    document.getElementById('results').innerHTML = "<img src='loading.gif' />";
    submitted = true;
    //Ajax Stuff
    //on Ajax success make sure to set submitted back to false
    return false;
}
function checkThings(){
    var someCondition = true;
    if(someCondition && !submitted){
        document.getElementById('results').innerHTML = "Press ENTER to search.";
    }
}

Javascript：onkeyup与onsubmit不相容

2 个答案: