下面是开发中用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也是需要引入的