【前端】给按钮加回车搜索功能,导致重复刷新问题

给按钮加回车搜索功能

 @*HTML*@
 <input type="text" id="txtStation"  />
 <input type="button" id="btnStation" value=" 搜索 " onclick="getStation();" />

    $(function(){
        $('#txtStation').on('keyup', function (event) {
            console.log(event)
            if (event.keyCode == "13") {
                $("#btnStation").click();
            }
        });
    })

问题:通过检查发现在出发搜索按钮点击之后会重新加载页面

原文链接：https://www.cnblogs.com/shangec/p/8867005.html

点击回车，页面刷新问题

　　问题出现原因：在做搜索时，由于只有一个条件，所以界面上有一个文本框，一个搜索按钮，为文本框添加了回车事件，但是在文本框输入值点击回车后，出现了搜索结果之后界面被刷新了，原因是，因为文本框在form表单中，点击回车，则提交了表单，刷新了界面。

　　解决办法：

　　1，将form表单改为div。

　　2，在form表单中再添加一个文本框，可以设置其为隐藏，这样点击enter回车事就不会刷新页面了。因为一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。如下：

　　<input id="hiddenText" type="text" style="display:none" />  

　　3，在form标签中添加onsubmit 事件，返回 false，来阻止 form 提交。如下：

　　<form name="keywordForm" method="post" action="" οnsubmit="return false;">   

　　4，添加JavaScript代码，禁止页面的Enter回车事件，代码如下：

<script type="text/javascript">
document.onkeydown = function() {
    var evt = window.event || arguments[0];
    if (evt && evt.keyCode == 13) {
        if (typeof evt.cancelBubble != "undefined")
            evt.cancelBubble = true;
        if (typeof evt.stopPropagation == "function")
            evt.stopPropagation();
　　　　　return false;
    }
    return true;
}
</script>