捕捉enter事件实现搜索功能时遇到的一个怪异问题

捕捉enter事件实现搜索功能时遇到的一个怪异问题

用的是bootstrap框架。

HTML代码：

 1 <form class="form-horizontal">
 2       <fieldset>
 3           <div class="control-group">
 4               <div class="controls">
 5                   <div class="input-append pull-right">
 6                       <input id="sample_search" class="span3" type="text" size="32" value="" placeholder="文件MD5/文件名" onKeyUp="goSearch(event)" /><a href="javascript:void(0);" id="samplesearchbtn" class="btn"><i class="icon-search"></i>搜索</a>
 7                   </div>
 8   
 9                   <div class="btn-group pull-left">
10                       <button class="btn dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span>
11                       </button>
12                       <ul class="dropdown-menu">
13                           <li><a href="javascript:void(0);" onClick="multi_online_identify()">子菜单一</a></li>
14                           <li><a href="javascript:void(0);">子菜单二</a></li>
15                           <li><a href="javascript:void(0);">子菜单三</a></li>
16                       </ul>
17                   </div>
18               </div>
19           </div>
20       </fieldset>
21 </form>

JS代码：（传说中的可以兼容IE和Firefox的代码）

1 function goSearch(event){
2     var e = event || window.event || arguments.callee.caller.arguments[0];
3     if(e && e.keyCode==13){
4         getSampleInfo({'page':1});
5     return false;
6     }
7 }

在chrome和firefox浏览器中运行的现象：鼠标点击文本输入框，输入关键字，按下enter键，能实现搜索功能，但“下拉菜单”被展开，就像下拉菜单同时被点击了一样。

解决办法：去掉<form>和<fieldset>这两个层级的标签。

好像问题解决了^__________^？

但，等等，在IE8和IE9下，按下enter键下拉菜单还是会展开，好吧，几经折腾，找到的解决办法是把<button>标签换成<a>标签，最终HTML代码如下：

 1            <div class="control-group">
 2                <div class="controls">
 3                    <div class="input-append pull-right">
 4                        <input id="sample_search" class="span3" type="text" size="32" value="" placeholder="文件MD5/文件名" onKeyUp="goSearch(event)" /><a href="javascript:void(0);" id="samplesearchbtn" class="btn"><i class="icon-search"></i>搜索</a>
 5                    </div>
 6    
 7                    <div class="btn-group pull-left">
 8                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">下拉菜单<span class="caret"></span>
 9                        </a>
10                        <ul class="dropdown-menu">
11                            <li><a href="javascript:void(0);" onClick="multi_online_identify()">子菜单一</a></li>
12                            <li><a href="javascript:void(0);">子菜单二</a></li>
13                            <li><a href="javascript:void(0);">子菜单三</a></li>
14                        </ul>
15                    </div>
16                </div>
17            </div>

这下应该没问题了~

posted @ 2012-10-27 14:25 丘亭子 阅读( ...) 评论( ...) 编辑 收藏