keyCode 13 不工作

Question

我在我的应用程序中开发了搜索功能。用户可以通过在输入框中键入地址来搜索街道。在 keyup 上，将调用一个函数，将输入与充满地址的数据库进行比较。该函数返回 5 个建议，这些建议显示在输入框下方，就像一种下拉菜单。这工作得很好。用户之后可以 select 其中一个建议，这会触发另一个功能。

我现在要实现的是，当用户按下回车键时，第二个函数会自动调用第一个建议。我认为编程不会那么困难，但我遇到了一些困难。当我按下 enter 时，页面刷新而不是转到函数。

这是我的代码：

<div id = "toolbar">
<form id ="suggestions">
    <input type = "text" id = "insertText" autocomplete="off" onkeyup = "if(event.keyCode == 13) {SearchAddress(option1.text)} else {giveSuggestion()}" onfocus='showOptions()'
    <option class="option" id = "option1" onmousedown = "searchAddress(option1.text)"></option>
    <option class="option" id = "option2" ... </option>
</form>
</div>

CSS

#toolbar {
        position: fixed;
        width: 100%;
        height: 25px;
        top: 0;
        left: 0;
        padding: 5px 10px;
        background: #ccc;
        border-bottom: 1px solid #333;
    }
#suggestions {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 310px;
        top: 5px;
        background-color: white;
        font-size: 12px;
    }
.option{
        display:none;
        cursor: default;
        padding: 0px 3px;
    }

有什么建议吗？

Answer 1

我猜浏览器不知道是什么事件所以......

<input type = "text" 
       id = "insertText"
       autocomplete="off" 
       onkeyup = "function(event){if(event.keyCode == 13) 
                                    {SearchAddress(option1.text)} 
                                  else {giveSuggestion()}"
       onfocus='showOptions()'}" />

Answer 2

当您点击 enter 时，浏览器会尝试提交表单。

所以，有两种可能的解决方案：

删除表单标签，如果你不需要从它发送任何数据到后端。
将 onsubmit="return false;" 添加到表单标签。

Answer 3

表单的默认行为将刷新页面，因此将表单标签替换为 div，并使用 jQuery 或 vanilla XMLHttpRequest 等库自行处理表单提交 对象。

keyCode 13 不工作

keyCode 13 not working

javascript

css

keycode