给按钮加回车搜索功能
@*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>