bootstrap制作搜索框及添加回车搜索事件

　　下面是开发中用bootstrap制作的一个搜索框，以及给搜索框添加回车搜索事件的一个小案例。

　　

　　bootstrap制作搜索框及添加回车搜索事件

　　　　下面是功能实现的代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>bootstrap制作搜索框及添加回车搜索事件</title>

         <link rel="stylesheet" type="text/css" href="../trd/bootstrap/css/bootstrap.min.css"/>

         <script type="text/javascript" src="../trd/jquery/jquery-1.11.2.js"></script>
         <script type="text/javascript" src="../trd/bootstrap/js/bootstrap.min.js"></script>

     </head>
     <body>
         <div class="col-sm-4">
             <div class="input-group">
                 <input type="text" class="form-control" onkeydown="onKeyDown(event)"/>
                 <span class="input-group-addon""><i class="glyphicon glyphicon-search"></i></span>
             </div>
         <div class="col-sm-4">

         <script type="text/javascript">
             function onKeyDown(event){
                 var e = event || window.event || arguments.callee.caller.arguments[0];
                 if(e && e.keyCode==27){ // 按 Esc
                     //要做的事情
                 }
                 if(e && e.keyCode==113){ // 按 F2
                      //要做的事情
                 }
                 if(e && e.keyCode==13){ // enter 键
                      alert("此处回车触发搜索事件");
                 }

             }

         </script>
     </body>
 </html>

　　在上面的代码中有几点需要注意的：

　　1、由于bootstrap依赖于jquery,所以在引入bootstrap.min.js之前要先引入jquery.js

　　2、bootstap.min.css也是需要引入的