首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

<转>键盘回车事件导致页面刷新的有关问题

2012-11-23 
转键盘回车事件导致页面刷新的问题我最近在做一个 Ajax 查询的功能,代码如下:1form namekeywordForm

<转>键盘回车事件导致页面刷新的问题

我最近在做一个 Ajax 查询的功能,代码如下:

1<form name="keywordForm" method="post" action="">?? 2<p id="profile_nav">?? 3<label for="profile"> 关键字搜索: </label>?? 4<input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />?? 5<input type="button" value="搜索" onClick="searchKeyword()">?? 6</p>? 7</form>

在文本框中输入关键字按回车,页面自动刷新了,结果肯定是没有实现无刷新搜索了。想了想,可能是按回车后默认提交了表单,于是将form去掉,果然不刷了。但是还是会有很多地方需要用到form。

一个表单下,如果只有一个文本框时,按下回车将会触发表单的提交事件。

既然是只有一个文本框才会出问题,那么可以加一个隐藏的文本框,如下:

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

现在代码成了这样:

1<form name="keywordForm" method="post" action="">?? 2<p id="profile_nav">?? 3<label for="profile"> 关键字搜索: </label>?? 4<input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />?? 5<input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" /> 6<input type="button" value="搜索" onClick="searchKeyword()">?? 7</p>? 8</form>

结论是,可以采取两种方法解决这种问题:1.去掉表单;2.如果非得用表单,只要不让表单里有且只有一个文本框就OK了。

如果以上的方法还不足以让你去解决问题,那么你可以用以下方法来阻止因为回车而引起的表单自动提交:

1<form name="keywordForm" method="post" action="" onsubmit="return false;">?? 2<p id="profile_nav">?? 3<label for="profile"> 关键字搜索: </label>?? 4<input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />?? 5<input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" /> 6<input type="button" value="搜索" onClick="searchKeyword()">?? 7</p>? 8</form>

就是在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交。

热点排行