下面是開發中用bootstrap制作的一個搜索框，以及給搜索框添加回車搜索事件的一個小案例。
bootstrap制作搜索框及添加回車搜索事件
下面是功能實現的代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>bootstrap制作搜索框及添加回車搜索事件</title> 6 7 <link rel="stylesheet" type="text/css" href="../trd/bootstrap/css/bootstrap.min.css"/> 8 9 <script type="text/javascript" src="../trd/jquery/jquery-1.11.2.js"></script> 10 <script type="text/javascript" src="../trd/bootstrap/js/bootstrap.min.js"></script> 11 12 </head> 13 <body> 14 <div class="col-sm-4"> 15 <div class="input-group"> 16 <input type="text" class="form-control" onkeydown="onKeyDown(event)"/> 17 <span class="input-group-addon""><i class="glyphicon glyphicon-search"></i></span> 18 </div> 19 <div class="col-sm-4"> 20 21 22 <script type="text/javascript"> 23 function onKeyDown(event){ 24 var e = event || window.event || arguments.callee.caller.arguments[0]; 25 if(e && e.keyCode==27){ // 按 Esc 26 //要做的事情 27 } 28 if(e && e.keyCode==113){ // 按 F2 29 //要做的事情 30 } 31 if(e && e.keyCode==13){ // enter 鍵 32 alert("此處回車觸發搜索事件"); 33 } 34 35 } 36 37 </script> 38 </body> 39 </html>
在上面的代碼中有幾點需要注意的：
1、由於bootstrap依賴於jquery,所以在引入bootstrap.min.js之前要先引入jquery.js
2、bootstap.min.css也是需要引入的