您的位置：首页 > Web前端

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

2016-12-12 10:57 302 查看

我最近在做一个 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()" >

</

</

form

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

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

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

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

现在代码成了这样：

view
source

print ?

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()" >

</

</

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()" >

</

</

form

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航