bootstrap制作搜索框及添加回车搜索事件
Posted 醉东风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap制作搜索框及添加回车搜索事件相关的知识，希望对你有一定的参考价值。
下面是开发中用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也是需要引入的
以上是关于bootstrap制作搜索框及添加回车搜索事件的主要内容，如果未能解决你的问题，请参考以下文章