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>
bootstrap 5
18</div>
19<div class="col-sm-4">
20
21
22<script type="text/javascript">
23function onKeyDown(event){
24var e = event || window.event || arguments.callee.caller.arguments[0];
25if(e && e.keyCode==27){ // 按 Esc
26//要做的事情
27                }
28if(e && e.keyCode==113){ // 按 F2
29//要做的事情
30                }
31if(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也是需要引⼊的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。