我最近在做一个 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。
一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。
既然是只有一个文本框才会出问题，那么可以加一个隐藏的文本框，如下：
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()"
>
|
结论是，可以采取两种方法解决这种问题：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 后面加上一个 onsubmit 事件，返回 false，来阻止 form 提交。